This is a simple code to create a function in the TinyMCE (Advanced) editor. It creates an icon in the toolbar and once you click it some DIV tags will be added into the editor. This works great.. But how can I undo that style (div) from the element.

This will be added to the editor, once you click on the icon:

<div class="kader well"><div class="remove_kader"></div><p> [TEXT] </p></div>

I want to create a function to remove the div elements from the (selected) text. The best way would be, when you click on the "remove_kader" DIV. See below (the blue arrow).

enter image description here

tinymce.create('tinymce.plugins.wpse723953_plugin', {
    init : function(ed, url) {
        ed.addCommand('wpse72395_insert_shortcode', function() {
            selected = tinyMCE.activeEditor.selection.getContent();
            if( selected ){
                content =  '<div class="kader well"><p>'+selected+'</p><div class="remove_kader"></div></div>';
                content =  '<div class="kader well"><p></p><div class="remove_kader"></div></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.wpse723953_plugin);
  • Anyone who knows the answer? – Danny Sep 2 at 8:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.