Вставка пустых тегов P до и после фальшивого элемента

Question

Я новичок в CKEditor, пишу свой первый плагин, и я просто не могу найти ответ на этот вопрос.

У меня есть плагин, который создает элемент div в источнике, содержащем толькотекст !!!!!NEWSTABLE!!!!!.Атрибут класса установлен на newsDiv.В редакторе WYSIWYG я просто хочу, чтобы он отображал поддельный элемент-заполнитель.Это работает нормально, проблема в том, что когда я переключаюсь обратно в режим WYSIWYG после нахождения в режиме источника, он вставляет пустые теги абзаца выше и ниже вставленного div.Переключение enterMode на CKEDITOR.ENTER_BR исправляет это, но я все же хотел бы, чтобы клавиша ввода создавала абзац, а не пробел.

Мой код плагина (на основе исходного кода флэш-плагина) выглядит следующим образом:

(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' ]
    });

})();

После нажатия кнопки, которая активирует этот плагин, я нажимаю «Источник», и он, как и ожидалось ...

<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 автоматически исправляет это, как вы видели выше.