Simple TinyMCE plugin issue

enter image description here

I created this following simple TinyMCE plugin, which generates a div within the WordPress editor.

tinymce.create('tinymce.plugins.wpse72395_plugin', {
    init : function(ed, url) {
        ed.addCommand('wpse72395_insert_shortcode', function() {
            selected = tinyMCE.activeEditor.selection.getContent();
            if( selected ){
                content =  '<div class="kader">'+selected+'</div>';
            }else{
                content =  '<div class="kader"></div>';
            }
            tinymce.execCommand('mceInsertContent', false, content);
        });
        ed.addButton('mm_kader', {title : 'Kader aanmaken', cmd : 'wpse72395_insert_shortcode', image: url + '/icon.png' });
    }
});
tinymce.PluginManager.add('mm_kader', tinymce.plugins.wpse72395_plugin);

In the editor:

<div class="kader"></div>

That works well, but once I want to use (for example) an unordered list within the div, it all get messed up in the Editor. See the attached image. Any ideas on this issue?

Read more here:: Simple TinyMCE plugin issue

Leave a Reply

Your email address will not be published. Required fields are marked *