Question

我已经在CKEditor网站上学习了一个教程，但我无法弄清楚为什么我的自定义工具栏没有出现在CKEditor上。最初我打开了所有默认工具栏，但现在它已恢复为文本区域。有人可以帮忙吗？代码如下：

$(function () {

    CKEDITOR.replace('txtBodyText', 
        config.toolbar=[
             { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
             { name: 'list', items: ['NumberedList', 'BulletedList'] },
             { name: 'Indent', items: ['Outdent', 'Indent'] },
             { name: 'align', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
             { name: 'links', items: ['link', 'unlink;'] },
             { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule'] },
             { name: 'styles', items: [ 'Font', 'FontSize'] },
             { name: 'Clipboard', items: ['Cut', 'Copy', 'PasteText', 'PasteFromWord'},
             { name: 'undo', items: [ 'Undo', 'Redo'] },
             { name: 'tools', items: [ 'Maximise'] },
             { name: 'mode', items: [ 'Source'] }

        ]);
})


 <td class="prompt">Body</td>
            <td>
                <%: Html.TextArea("txtBodyText", Model.EmailTemplate.BodyText)%>
            </td>

Answer 1

这看起来不像是替换函数的有效第二个参数。这可能有所帮助：

var configObject = {};
configObject.toolbar = [
    [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ],
    [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],
    '/',
    [ 'Bold', 'Italic' ]
];
CKEDITOR.replace('txtBodyText', configObject);

看到两者的区别？要替换的第二个参数需要是有效的JavaScript对象。您的示例中有一个拼写错误：请参阅unlink;？这不是真的正确:)。

Answer 2

CKEDITOR.replace()接受要用编辑器和配置替换的元素的ID。但是，您不需要写：

CKEDITOR.replace( 'txtBodyText', 
    config.toolbar=...

只需使用toolbar就可以了，而不需要使用前面的config。而且，如上所述，您的JavaScript代码不正确（请注意您的=而不是:）：

CKEDITOR.replace( 'txtBodyText',  {
    toolbar: ...
} );

了解如何在CKEditor SDK的示例中完成此操作，例如： Custom Toolbar sample。向下滚动以获取样本的完整源代码。

在任何编辑器配置更改后，不要忘记清除浏览器缓存！

Answer 3

我底部有一对额外的支架。如果Javascript中存在问题，则不会运行整段代码。所以最好检查一下！

为什么我的自定义工具栏没有出现在我的CKEditor上

3 个答案: