Hello,
I've recently tried creating a widget plugin to stop ckeditor from messing with specific elements in my contenteditable.
One of the features i expected to have is the ability to have empty elements. But apparantly ckeditor still removes them.
This is one of the html blocks for my widget after the ckeditor loads, the content in bold-underline is what the ckeditor removes:
<div class="smart_media cke_widget_element ui-droppable ui-draggable ui-draggable-handle" data-id="XX" contenteditable="false" data-cke-widget-data="XX" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="smartmedia"> <i class="icon_xx"></i> <div class="quote_holder">XX</div> <i class="icon_xx"></i> </div>
And this is my plugin:
CKEDITOR.plugins.add( 'smartmedia', { requires: 'widget', init: function( editor ) { editor.widgets.add( 'smartmedia', { allowedContent: true, draggable: false, requiredContent: 'div(smart_media)', upcast: function( element ) { return element.name == 'div' && element.hasClass( 'smart_media' ); } } ); } } );
Any help on the matter would be greatly appreciated.