在CKEditor中添加<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>

我为你创建的小提琴就在这里：https://jsfiddle.net/t4jmo09g/

我想要的结果：

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

我该怎么办？

Answer 1

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

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

但如果我是你，我可能会完全使用config.removePlugins = 'div'删除该插件，然后只使用config.extraAllowedContent，因为加载插件没有任何意义＃39; t use。

通过内容过滤了解有关Div，config.extraAllowedContent和config.removePlugins的详情。还有一个common problems关于CKEditor中的高级内容过滤器。

Answer 2

您是否有机会尝试使用共享空间轻松完成某些事情？

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

你可以在中间设置长工具栏和底栏以及较窄的主体，可选择包围其他div。