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' ] }
    ];
};

以上操作都没有改变工具栏，我不确定是否有遗漏。

非常感谢您的帮助。

- Rickus Harmse

Answer 1

请确保您正确定义了配置 - 查看设置 CKEditor 配置文章中的一些代码示例。您正在犯以下错误：

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

此外，检查一些CKEditor SDK示例以获取示例 - 如果打开其中任何一个（如此示例），请向下滚动到“获取示例源代码”部分并复制源代码。

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

最后，下载过多的 CKEditor 包然后在配置中删除插件 /按钮没有太多意义 - 最好在CKBuilder中创建自定义构建。

- Anna Tomanek

---

谢谢你的建议，我更改了提到的插件以使代码更简短...我们下载了臃肿的文件，因为不是所有实例都具有相同的功能，所以目前我们只是试图让它工作。 - Rickus Harmse

成功从源代码中让它工作了，我将代码放入实例创建器而不是配置文件中，但我认为邮件问题出在实例上，必须是 toolbarGroups：[ 而不是 toolbarGroups = [。 - Rickus Harmse

Answer 2

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>

演示

这是一个演示，它展示了一张图片。

- Ram Pukar

Answer 3

我的CKEditor config.js更改在工具栏中没有反映，直到我匹配了与示例相同的路径。例如：工作示例具有此路径：

ckeditor\samples\index.html
ckeditor\config.js

所以我用 CKEditor 制作了我的工作网页应用程序，如下：

rootwebfolder/ckeditor/config.js
rootwebfolder/mywebpage.php

之前，我将 CKEditor 放在根目录的同一级别上，但现在我将其移动到了根目录中。 当然，我必须更改相对路径语句，现在是这样的[并显示启用 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>";

希望这能帮到某人！

- dcparham