CKEditor 自定义工具栏配置

Question

我在这个论坛和 CKEditor 网站上查看了关于这个主题的几个问题，但到目前为止没有任何帮助。首先，我在 SharePoint 2010 网站上运行 CKEditor 4.3.2，在 jQuery UI 模式对话框中使用内联编辑器。将 CKEditor 添加到对话框中很轻松，但对于设置更苗条的工具栏，我不能说同样的话。这是我到目前为止所做的：

1. slimConfig.js

   CKEDITOR.editorConfig = function(config) {
       config.toolbar = [
           {name: "basicstyles", items: ["Bold", "Italic", "Underline", "Strike", "Subscript", "Superscript", "-", "RemoveFormat"]},
           {name: "paragraph", items: ["NumberedList", "BulletedList"]}
       ];
   }
   

2. 源 JavaScript

   setToolbar("notes");
   setToolbar("access");
   //. . .[several other fields]. . .
   
   function setToolbar(divName) {
       CKEDITOR.replace(divName, {customConfig: "/customConfigs/slimConfig.js"});
   }
   

此外，我将目标字段设置为 div，使用 contenteditable 设置为 true，如下所示：

<div id="notes" contenteditable="true"></div>

脚本似乎运行良好，直到在 ckeditor.js 第 308 行遇到异常，其中错误文本是“编辑器实例已附加到提供的元素”。再走几步后，它返回到第 308 行的同一区域，此时我得到一个终端异常，并显示消息“异常抛出且未捕获”。

我相信我现在已正确设置所有内容，但不知道如何解决此错误。有人有设置自定义工具栏的经验吗？

Answer 1

默认情况下，CKEditor 用内联编辑器替换 contenteditable="true" 的所有元素。所以当你再次尝试替换它时，它会抛出一个错误，因为它没有意义。

如果您想完全控制您的编辑器，请将 CKEDITOR.disableAutoInline 设置为 false 并手动处理所有实例。当然，您可以随时在CKEDITOR.instances 对象中找到您的实例，如果您愿意，可以调用editor.destroy()。

见http://docs.ckeditor.com/#!/guide/dev_inline