javascript - CKEditor 工具栏配置不起作用

Question

我最近开始使用 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' ] }
    ];
};

以上都没有改变工具栏中的任何东西，所以我不确定我是否忽略了什么。

我们将不胜感激。

Answer 1

请确保您正确定义您的配置 - 检查 Setting CKEditor Configuration一些代码示例的文章。您正在犯的一些错误:

• 混合 config.optionName 和 optionName。
• 多次声明 extraPlugins - 您应该将所有额外插件放入一个声明中:config.extraPlugins = 'myplugin,anotherplugin';

同时检查一些 CKEditor SDK samples例如 - 如果您打开其中任何一个(例如 this one )，向下滚动到“获取示例源代码”部分并获取要复制的源代码。

最后但同样重要的是，使用浏览器的 JavaScript 控制台检查错误并在每次更改后清除缓存!

最后，下载一个臃肿的 CKEditor 包然后删除配置中的插件/按钮毫无意义 - 最好在 CKBuilder 中创建自定义构建.