Image resize handles in IE's contenteditable m

Question

How can I selectively turn off image resize handles in IE 7+'s contenteditable mode? I've tried setting the image's contentEditable to false and its onresizestart to "return false" to no avail.

I'm using tinyMCE.

Answer 1

Set unselectable="on" for your images. Works for older IEs, but is lately deprecated.

Answer 2

You can disable the function of the handles by defining a behaviour file. I couldn't find anything which would let you hide the handles. The result of the code below is that dragging the handles has no effect.

noresize.htc:

<public:component lightweight="true">

    <script language="javascript">

    function CancelEvent()
    {
            return false ;
    }

this.onresizestart = CancelEvent ;
this.onbeforeeditfocus = CancelEvent ;

</script>

</public:component>

Then in css:

img.noresize {
    behaviour:url(/css/noresize.htc);
}

Note that you'll need to get that url() path right. Add the css class to the images you want to selectively disable.

This article has an alternative .htc file which didn't work for me:

http://nickw101.wordpress.com/2011/02/25/disabling-image-resizing-in-ie-contenteditable-elements/

Answer 3

Just the best fix ever:

<div contenteditable="true">
    <label contenteditable="false"><input/></label>
</div>

or any html element that wraps your input/img

Works like a charm on IE11 with img too.

Answer 4

Often you will not want the resize functionnality for any element to be accessible. You can set the onresizestart handler of the contenteditable container so it cancels any resize. That is:

<div id="editor" contenteditable="true" onresizestart="return false;">
    <img src="..." />
</div>

Or with JS:

var editor = document.getElementById('editor');
editor.onresizestart=function(){return false;}

That will not hide the handles but the users will not be able to resize the element, whatever type it is.

Hope this helps!

Answer 5

I was using the advimagescale plugin in tinyMCE to stop all images from being resized. However, I found it stopped images from being dragged and dropped into an editor instance.

I found I could strip the size attributes on mouseup using:

setup : function(ed) {
    ed.onMouseUp.add(function(ed, e) {
        if (e.target.nodeName == "IMG") {
            e.target.removeAttribute("width"); 
            e.target.removeAttribute("height"); 
        }
    });
}

I would dearly love to get rid of those damn handles though.

Answer 6

This took pain, time and luck to find: You want the 'controlselect' event to remove the resize handles in IE.

element.oncontrolselect = function () { return false; };

The above line of code worked for me (caveat: Not using TinyMCE, but then, this seems to be a contentEditable headache, not a specific TinyMCE one). You need to set this handler on any element you want to not have these drag handles (in my case, images).