javascript - 在 CKEditor 中添加一个 <div> 而不在工具栏上嵌入一个 <div> 按钮

Question

我想配置 CKEditor，比如它应该在输入区域内有一个 div。如下图所示，但我想从工具栏中删除 div 按钮(我在图片中标记的)。

我的代码在这里:

<form>
       <textarea id="contents" name="contents">
            &lt;div id=&quot;mydiv&quot; style=&quot;border:1px solid red;margin: 0 auto;width:780px;height:1200px;margin-top:-18px;&quot;&gt; my div &lt;/div&gt;
        </textarea>

         <script src="//cdn.ckeditor.com/4.5.1/full/ckeditor.js"></script>
        <script>

     var Editor   =   CKEDITOR.replace( 'contents', {uiColor: '#88aa22'});
            Editor.config.toolbar = [
                {name: 'first', items: ['Bold', 'Italic', 'Underline', 'Find', 'Replace']},
                {name: 'second', items: ['SelectAll', 'Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo']},
                {name: 'therd', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']},
                {name: 'forth', items: ['Smiley', 'SpecialChar', 'NumberedList', 'BulletedList']},
                {name: 'fifth', items: ['Blockquote','HorizontalRule','Maximize', 'Preview']},
                '/',
                {name: 'last', items: ['Font', 'FontSize', 'Styles', 'Format','CreateDiv']}
            ];
             Editor.config.forcePasteAsPlainText = true;
             function Send(){
             var data = CKEDITOR.instances.contents.getData();
             alert(data);
         }
        </script>

</form>

我为您创建的 fiddle 在这里:https://jsfiddle.net/t4jmo09g/

我想要的结果:

我正在尝试在编辑器中创建一个类似环境的页面。

我该怎么办？

Answer 1

您可以排除 'CreateDiv'来自 config.toolbar然后定义 config.extraAllowedContent = 'div[dir,id,lang,title](*){*}'允许任何类、任何样式但具有有限属性集的 div，这是 Div 的默认配置插入。

extraAllowedContent是必要的，因为 CKEditor 4.1.x 功能对应于可编辑的内容。因此，如果您从工具栏中删除该功能，您也会告诉编辑器清除关联的内容类型 (html)。很简单——没有 Div 插件，没有 <div>在内容中。

但如果我是你，我可能会用 config.removePlugins = 'div' 完全摆脱这个插件然后玩config.extraAllowedContent因为加载一个你不使用的插件是没有意义的。

阅读更多关于 config.extraAllowedContent 的信息, config.removePlugins 和 common problems与内容过滤。还有一个 official guide关于 CKEditor 中的高级内容过滤器。