javascript - CKEditor::通过自定义标签包裹内容

Question

我为CKEditor编写了一个插件。我想用自定义样式将编辑器的内容包装在div之间。

在本例中，我使用 dialog 作为样式 div 标记。如何将编辑器的内容包装在 div 内:

  onOk: function() {
            var dialog = this;
            var color = dialog.getValueOf('tab1', 'color');
            // other styles
            var tag= '<div style="';
            tag += 'color:' + color + ';';
            // ... other styles
            tag += '">';
            // tag += contents ;
            tag += "</div>";
            editor.insertHtml(tag)
        },
        contents: [{ ...

Answer 1

好的，我找到了解决方案:

首先在 config.js 中添加以下行:

config.allowedContent = 'div{*}'; // this is important

参见here和 here .

然后在 onOk 函数中执行以下操作:

   onOk: function() {
            contents = editor.document.getBody().getHtml(); // get the content of CKEditor
            var dialog = this;
            var color = dialog.getValueOf('tab1', 'color');
            // other styles
            var tag= '<div style="';
            tag += 'color:' + color + ';';
            // ... other styles
            tag += '">';
            tag += contents ;
            tag += "</div>";
            editor.setData(tag);
        },
        contents: [{ ...