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

标签 javascript plugins ckeditor

我是 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>

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

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

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

标记会添加到源中吗?

最佳答案

我不确定插件和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

关于javascript - Cckeditor插件: insert fake element add unwilling <p> tags before and after,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29562393/

相关文章:

javascript - 有声音的新条目时的php通知

javascript - 无法通过 JavaScript 在输入焦点上触发键盘

ios - TriggerIO - RevMobAds

grails - 可以从另一个插件覆盖插件的 Controller 吗?

php - vBulletin 开发入门

asp.net-mvc - MVC Homecontroller 在数据库中编辑详细信息

php - 如何在 PHP 中使用 POST 从 CKEDITOR 获取值?

ckeditor - 如何将 ckeditor ui 颜色更改为纯色

javascript - Requirejs 和外部脚本

javascript - 为什么在 Web 组件中使用 setter 时会被覆盖而不是被调用?