Laravel 5 中的 CKEditor 4 未在工具栏中显示 iFrame 图标
CKEditor 4 in Laravel 5 not showing the iFrame icon in toolbar
我在 Laravel 5 项目中使用 CkEditor。
在bower_component/ckeditor/
下的config.js中我使用了下面的代码:
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{name: 'clipboard', groups: ['clipboard', 'undo']},
{name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{name: 'links'},
{name: 'insert'},
{name: 'forms'},
{name: 'tools'},
{name: 'document', groups: ['mode', 'document', 'doctools']},
{name: 'others'},
'/',
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
{name: 'styles'},
{name: 'colors'},
{name: 'about'}
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.FormatOutput = false;
config.allowedContent = true;
};
此外,在相关页面的js中,我使用了以下代码:
$(function () {
CKEDITOR.replace('editor2', {
allowedContent: true,
});
});
在HTML中,我使用了如下代码:
<textarea name="content" rows="10" cols="80" id="editor2"></textarea>
在 bower_component/ckeditor/plugins
下的 plugins
文件夹中,我看到 "iframe" 文件夹存在。但是,我在 ckeditot 工具栏中看不到 iframe 图标。如上所述,我将 "allowedContent" 配置为 true
。这是屏幕截图:
有什么问题?
我找到了解决方案。
打开bower_component/ckeditor
下的config.js
,写入如下代码:
config.extraPlugins = 'iframe';
瞧!您将在 ckeditor 工具栏上看到 iframe 图标。
我在 Laravel 5 项目中使用 CkEditor。
在bower_component/ckeditor/
下的config.js中我使用了下面的代码:
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{name: 'clipboard', groups: ['clipboard', 'undo']},
{name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{name: 'links'},
{name: 'insert'},
{name: 'forms'},
{name: 'tools'},
{name: 'document', groups: ['mode', 'document', 'doctools']},
{name: 'others'},
'/',
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
{name: 'styles'},
{name: 'colors'},
{name: 'about'}
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.FormatOutput = false;
config.allowedContent = true;
};
此外,在相关页面的js中,我使用了以下代码:
$(function () {
CKEDITOR.replace('editor2', {
allowedContent: true,
});
});
在HTML中,我使用了如下代码:
<textarea name="content" rows="10" cols="80" id="editor2"></textarea>
在 bower_component/ckeditor/plugins
下的 plugins
文件夹中,我看到 "iframe" 文件夹存在。但是,我在 ckeditot 工具栏中看不到 iframe 图标。如上所述,我将 "allowedContent" 配置为 true
。这是屏幕截图:
有什么问题?
我找到了解决方案。
打开bower_component/ckeditor
下的config.js
,写入如下代码:
config.extraPlugins = 'iframe';
瞧!您将在 ckeditor 工具栏上看到 iframe 图标。