在伪元素前后插入空白 P 标签

Question

我是 CKEditor 的新手，正在编写我的第一个插件，但我无法在任何地方找到答案。

我有一个插件，它在源代码中创建一个 div 元素，其中仅包含文本 !!!!!NEWSTABLE!!!!!。类属性设置为newsDiv。在 WYSIWYG 编辑器上，我只希望它显示一个假的占位符元素。这很好用，问题是当我在源模式下切换回所见即所得模式时，它会在插入的 div 的上方和下方插入空白段落标签。 将 enterMode 切换为 CKEDITOR.ENTER_BR 可以解决此问题，但我仍然希望使用 enter 键来创建段落而不是换行符。

我的插件代码（灵感来自flash插件源代码）如下：

(function() {

    function isNewsEmbed(element) {
        return (element.attributes.class == 'newsDiv');
    }

    function createFakeElement(editor, realElement) {
        return editor.createFakeParserElement(realElement, 'cke_news', 'div', false);
    }

    CKEDITOR.plugins.add('newsTable', {
        init: function(editor) {
            var pluginName = 'newsTable';
            editor.ui.addButton('NewsTable', {
                label: 'Add News Section',
                icon: 'https://d26h7uo9h7bqnn.cloudfront.net/famfamfam/newspaper_add.png',
                command: pluginName
            });
            editor.addCommand(pluginName, {
                exec: function(editor) {
                    var node = new CKEDITOR.dom.element('div');
                    node.setAttribute('class', 'newsDiv');
                    node.setHtml('!!!!!NEWSTABLE!!!!!');
                    elem = editor.createFakeElement(node, 'cke_news', 'div', false)
                    editor.insertElement(elem);
                }
            }); 
            var css = 'img.cke_news{' +
                'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' +
                'background-position: center center;' +
                'background-repeat: no-repeat;' +
                'border: 1px solid #a9a9a9;' +
                'width: 80px;' +
                'height: 80px;' +
            '}';
            editor.addCss(css);
        },
        afterInit: function(editor) {
            var dataProcessor = editor.dataProcessor,
                dataFilter = dataProcessor && dataProcessor.dataFilter;

            if (dataFilter) {
                dataFilter.addRules({
                    elements: {
                        'div' : function( element ) {
                            var attributes = element.attributes,
                            classId = attributes.classid && String( attributes.classid ).toLowerCase();
                            if (!classId && isNewsEmbed(element)){
                                return createFakeElement( editor, element );
                            }
                            return null;
                        }
                    }
                });
            }
        },
        requires : [ 'fakeobjects' ]
    });

})();

按下激活此插件的按钮后，我按下“Source”，它正如预期的那样......

<p>
<div class="newsDiv">
    !!!!!NEWSTABLE!!!!!</div>
</p>

但是，如果从那里进入 WYSIWYG 模式并再次返回（不做任何其他事情），则代码已更改为以下代码，这是我没想到的。

<p>
&nbsp;</p>
<div class="newsDiv">
!!!!!NEWSTABLE!!!!!</div>
<p>
&nbsp;</p>

我做错了什么？

Answer 1

我知道这是一个相当晚的答案（我正在寻找解决另一个问题，并偶然发现了这个问题），但你不能这样做的原因是因为 <p> 和 <div> 标签都是“块级”元素，并且您不能将块级元素放在另一个块级元素中。 （这只是无效的 HTML）。

CKEditor 会自动修复此问题，就像您在上面看到的那样。