tinyMCE remove/disable resizing toggles

Question

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.

Answer 1

Removing jQuery, and making cheez la weez's answer work for TinyMCE version 4. Use this in a plugin, in your init code, or just in your page after you instantiate the editor

// var editor = your tinyMCE editor instance (e.g. tinymce.activeEditor)

editor.on('mousedown', function(e) {

        var element = e.target,
            body = editor.dom.doc.body;

        if (editor.dom.hasClass( element, 'your-class')) {
            editor.dom.setAttrib(body,'contenteditable',false);
        } else {
            editor.dom.setAttrib(body,'contenteditable',true);
        }
});

The only unfortunate bit is that your user will have to click back into the editor to resume editing (arrow keys won't work)

Answer 2

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);  

})();