tinyMCE remove/disable resizing toggles

javascript, tinymce, wordpress

Solution

in the body tag of your editor is an attribute `contenteditable="true"`. that is what is adding those pesky resizing elements.

if you set that attribute to `false` you will not be able to edit anything.

what you need to do is set up an `onMouseDown` listener. if the user is clicking on the elements in question... set it to `contenteditable="false"`. if any other element, set it to `contenteditable="true"`.

try this...

(function() {  

    tinymce.create('tinymce.plugins.yourplugin', {  

        init : function(ed, url) { 

            ed.onMouseDown.add(function(ed, e) {    

                var body = ed.getBody();

                if(jQuery(e.target).hasClass('target-in-question')) {

                    jQuery(body).attr({'contenteditable': false})

                    // and whatever else you want to do when clicking on that element

                }else {
                    jQuery(body).attr({'contenteditable': true})
                }

            }); 

        },  

        createControl : function(n, cm) {  

            return null;  

        },  

    });  

    tinymce.PluginManager.add('yourplugin', tinymce.plugins.yourpluginl);  

})();

Problem

tinyMCE is adding those `move and resize handles` to some of my elements (not just the images). i would love to get rid of them all together but i have had no success. these did not work for me ``` tinyMCE.init({ object_resizing : false }); ``` seems like it should be real easy. OK, so it looks like it is adding the resize js to any element that is absolutely positioned. if that helps anyone with an answer. i just tried to remove it but i need to position it to do what i need.

Original source