Ckeditor plugin : insert fake element add unwilling <p> tags before and after

Question

I'm new to CKEditor. I'm trying to build a plugin that inserts a new div element which contains some custom content. The user have to see in the editor only a fake element that represent the true generated html content, created through createFakeElement() function.

Here is the onOk() function of the plugin :

        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);
        }

The issue is that when I insert the fakeElement in the editor, I can see in the source view that my div is surrounded with a

tag :

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

When I re-open the source view a second time, ckeditor cleans the code and then it looks like this :

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

When I try to insert the real element ('container' variable), everything is ok, there is no

tags added to the source, the problem seems to be tied to the fake element.

Have you any idea why these

tags are added to the source when a fake element is inserted in the editor ?

Answer 1

I'm not sure about plugins and ckeditor, but generally browsers and probably editors then don't allow inline elements to contain block elements, hence paragraph can not have division inside.

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.

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