CKEditor 工具栏配置不起作用
CKEditor toolbar configuration not working
我最近开始使用 CKEditor,但工具栏中有我们不会使用的功能。
我尝试从在线工具栏配置中复制代码,但工具栏没有改变。
我的 config.js 文件如下所示:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About';
};
这是直接从配置工具复制过来的。
在上面之后,我尝试将代码粘贴到初始化函数中,如下所示:
jQuery(function()
{
var editor = CKEDITOR.replace( 'message',
{
extraPlugins : 'stylesheetparser',
extraPlugins : 'filebrowser',
extraPlugins : 'popup',
//contentsCss : '<?= base_url(); ?>css/layout.css',
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
],
config.removeButtons = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About'
});
CKFinder.setupCKEditor(editor);
});
我也试过像这样简单地显示工具栏的一部分:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }
];
// Toolbar groups configuration.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] }
];
};
None 以上更改了工具栏中的任何内容,所以我不确定是否忽略了什么。
如有任何帮助,我们将不胜感激。
请确保正确定义您的配置 - 查看 Setting CKEditor Configuration 文章中的一些代码示例。你犯的一些错误:
- 混淆
config.optionName
和 optionName
。
- 多次声明
extraPlugins
- 你应该将所有额外的插件放在一个声明中:config.extraPlugins = 'myplugin,anotherplugin';
同时检查一些 CKEditor SDK samples for examples - if you open any of them (like this one),向下滚动到 "Get Sample Source Code" 部分并获取要复制的源代码。
最后但同样重要的是,使用浏览器的 JavaScript 控制台检查错误并在每次更改后清除缓存!
最后,下载一个臃肿的 CKEditor 包然后在您的配置中删除 plugins/buttons 没有什么意义 - 最好在 CKBuilder.
中创建自定义构建
include:
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/config.js"></script>
<textarea id="user_message"></textarea>
<script type="text/javascript">
var toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
var initEditor = function() {
return CKEDITOR.replace( 'user_message',{
toolbar : 'Basic',
uiColor : '#9AB8F3',
toolbarGroups,
});
}
initEditor();
</script>
演示
我的 CKEditor config.js 更改没有反映在我的工具栏中,直到我将匹配的路径与示例的路径相同。例如:工作示例具有此路径:
ckeditor\samples\index.html
ckeditor\config.js
所以我用 ckeditor 制作了我的工作网页应用程序:
rootwebfolder/ckeditor/config.js
rootwebfolder/mywebpage.php
之前,我的ckeditor与root处于同一级别,但我将其移至root。
当然,我必须更改相对路径语句,现在是这样的[并显示使 div 能够显示 CKEditor 工具栏的其他代码]:
echo "<script type='text/javascript'> window.CKEDITOR_BASEPATH ='mydomain/mainfolder/rootwebfolder/ckeditor/';</script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/ckeditor.js'></script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/config.js'></script>";
echo "<div id = 'divname' name = 'divname' class = 'ckeditor' style='visibility:hidden; height:415px'></div>";
echo "<script type='text/javascript'>CKEDITOR.replace('divname');</script>";
希望对大家有所帮助!
我最近开始使用 CKEditor,但工具栏中有我们不会使用的功能。
我尝试从在线工具栏配置中复制代码,但工具栏没有改变。
我的 config.js 文件如下所示:
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
config.removeButtons = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About';
};
这是直接从配置工具复制过来的。 在上面之后,我尝试将代码粘贴到初始化函数中,如下所示:
jQuery(function()
{
var editor = CKEDITOR.replace( 'message',
{
extraPlugins : 'stylesheetparser',
extraPlugins : 'filebrowser',
extraPlugins : 'popup',
//contentsCss : '<?= base_url(); ?>css/layout.css',
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
],
config.removeButtons = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About'
});
CKFinder.setupCKEditor(editor);
});
我也试过像这样简单地显示工具栏的一部分:
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }
];
// Toolbar groups configuration.
config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] }
];
};
None 以上更改了工具栏中的任何内容,所以我不确定是否忽略了什么。
如有任何帮助,我们将不胜感激。
请确保正确定义您的配置 - 查看 Setting CKEditor Configuration 文章中的一些代码示例。你犯的一些错误:
- 混淆
config.optionName
和optionName
。 - 多次声明
extraPlugins
- 你应该将所有额外的插件放在一个声明中:config.extraPlugins = 'myplugin,anotherplugin';
同时检查一些 CKEditor SDK samples for examples - if you open any of them (like this one),向下滚动到 "Get Sample Source Code" 部分并获取要复制的源代码。
最后但同样重要的是,使用浏览器的 JavaScript 控制台检查错误并在每次更改后清除缓存!
最后,下载一个臃肿的 CKEditor 包然后在您的配置中删除 plugins/buttons 没有什么意义 - 最好在 CKBuilder.
中创建自定义构建include:
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/ckeditor/config.js"></script>
<textarea id="user_message"></textarea>
<script type="text/javascript">
var toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
{ name: 'links', groups: [ 'links' ] },
{ name: 'insert', groups: [ 'insert' ] },
'/',
{ name: 'styles', groups: [ 'styles' ] },
{ name: 'colors', groups: [ 'colors' ] },
{ name: 'tools', groups: [ 'tools' ] },
{ name: 'others', groups: [ 'others' ] },
{ name: 'about', groups: [ 'about' ] }
];
var initEditor = function() {
return CKEDITOR.replace( 'user_message',{
toolbar : 'Basic',
uiColor : '#9AB8F3',
toolbarGroups,
});
}
initEditor();
</script>
演示
我的 CKEditor config.js 更改没有反映在我的工具栏中,直到我将匹配的路径与示例的路径相同。例如:工作示例具有此路径:
ckeditor\samples\index.html
ckeditor\config.js
所以我用 ckeditor 制作了我的工作网页应用程序:
rootwebfolder/ckeditor/config.js
rootwebfolder/mywebpage.php
之前,我的ckeditor与root处于同一级别,但我将其移至root。 当然,我必须更改相对路径语句,现在是这样的[并显示使 div 能够显示 CKEditor 工具栏的其他代码]:
echo "<script type='text/javascript'> window.CKEDITOR_BASEPATH ='mydomain/mainfolder/rootwebfolder/ckeditor/';</script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/ckeditor.js'></script>";
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/config.js'></script>";
echo "<div id = 'divname' name = 'divname' class = 'ckeditor' style='visibility:hidden; height:415px'></div>";
echo "<script type='text/javascript'>CKEDITOR.replace('divname');</script>";
希望对大家有所帮助!