I'm new to CKEditor, writing my first plugin and i just can't find the answer to this one anywhere.

I have a plugin which creates a div element in the source containing just the text !!!!!NEWSTABLE!!!!!. The class attribute is set to newsDiv. On the WYSIWYG editor, I just want it to display a fake placeholder element. This works fine, the problem is that when I switch back to WYSIWYG mode after having been in source mode, it inserts blank paragraph tags above and below the inserted div. Switching enterMode to CKEDITOR.ENTER_BR fixes this, but I would still like the enter key to make a paragraph rather than a break-space.

My plugin code (inspired by the flash plugin source code) is as follows:

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

After pressing the button that activates this plugin, I press 'Source' and it is as expected...

<p>
<div> !!!!!NEWSTABLE!!!!!</div>
</p>

However, if from there ones goes into WYSIWYG mode and back again (without doing anything else) the code has changed to the following, which i dont expect.

<p>
&nbsp;</p>
<div>
!!!!!NEWSTABLE!!!!!</div>
<p>
&nbsp;</p>

What am I doing wrong?

1 Answer

I know it's a rather late answer (I was searching to solve another issue, and stumbled upon this question), but the reason you can't do this, is because both the <p> and <div> tags are "block level" elements, and you can't put a block level element in another block level element. (It's just invalid HTML).

CKEditor automatically repairs this, in the way you're seeing above.

2

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.