javascript - Cckeditor插件: insert fake element add unwilling tags before and after

Question

我是 CKEditor 的新手。我正在尝试构建一个插件，插入一个新的 div 元素，其中包含一些自定义内容。用户只能在编辑器中看到一个假元素，它代表通过 createFakeElement() 函数创建的真实生成的 html 内容。

这是插件的 onOk() 函数:

        onOk: function () {

            var dialog = this,
                data = {},
                container = editor.document.createElement('div');

            this.commitContent(data);
            container.addClass('insert').setHtml(data.htmldata);

            var fakeElement = editor.createFakeElement(container, 'insert', 't_insert', false);

            editor.insertElement(fakeElement);
        }

问题是，当我在编辑器中插入 fakeElement 时，我可以在源 View 中看到我的 div 被

标签包围:

<p>
    <div class="insert">...</div>
</p>

当我第二次重新打开源代码 View 时，ckeditor 会清理代码，然后它看起来像这样:

<p>&nbsp;</p>
<div class="insert">...</div>
<p>&nbsp;</p>

当我尝试插入真实元素(“容器”变量)时，一切正常，没有

标签添加到源中，问题似乎与假元素有关。

您知道为什么当在编辑器中插入假元素时这些

标记会添加到源中吗？

Answer 1

我不确定插件和ckeditor，但通常浏览器和可能的编辑器不允许内联元素包含 block 元素，因此段落不能有划分 里面。

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

We discourage authors from using empty P elements. User agents should ignore empty P elements.

来源:http://www.w3.org/TR/html401/struct/text.html#h-9.3.1