在 CKEditor 中添加一个 <div> 而无需在工具栏上嵌入 <div> 按钮

Question

我想配置 CKEditor，好像它的输入区应该有一个 div。如下图所示，但我想从工具栏中删除 div button （我在图片中标记的）。

我的代码在这里：

<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

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

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

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

阅读有关 config.extraAllowedContent, config.removePlugins and common problems with content filtering. There's also an official guide CKEditor 中高级内容过滤器的更多信息。

Answer 2

您是否有机会尝试使用共享 space 轻松完成的事情？

http://sdk.ckeditor.com/samples/sharedspace.html

您可以有较长的工具栏和底栏，中间有较窄的正文，可选择被其他 div 包围。

在 CKEditor 中添加一个 <div> 而无需在工具栏上嵌入 <div> 按钮

Add a <div> inside CKEditor without embedding a <div> button on toolbar

html

javascript

jquery

editor

ckeditor