tinyMCE remove/disable resizing toggles

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)

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