Firefox - designMode: disable image resizing handles

Question

How can I prevent the user from being able to resize an image in designMode? (disable the handles when image is clicked)

Answer 1

Say you turn contentEditable on like this:

document.body.contentEditable = true;

All you have to do is turn it off for all (or some) images.

var imgs = document.getElementsByTagName("IMG");
for (var i = 0; i < imgs.length; ++i) {
    imgs[i].contentEditable = false;
}

Answer 2

This works fine for Firefox:

document.execCommand("enableObjectResizing", false, false);

For IE i've used:

image.attachEvent("onresizestart", function(e) { e.returnValue = false; }, false);

Answer 3

I think you'll find this much more acceptable. Seems to work in Firefox but I'm not sure about other browsers:

document.execCommand("enableObjectResizing", false, false);

It leaves the drag and drop ability intact.

Answer 4

Well, you cannot remove those resize handlers neither in Firefox nor IE... at least I couldn't find a solution.

At the end I managed that in Firefox by editing some configuration files from FF installation folder and we don't want to do that, right?

Anyway, if you want to disable resizing if images (but resize handlers will still be visible) just add some css style like:

img {
    width: auto !important;
    height: auto !important;
}

regards, Mihailo

Answer 5

Although the question was a long time ago. Every block element (div, img...) will be decorated with handles from FF. Test it:

<div id="myDiv" contenteditable="true"><p>Sample text!</p></div>

No handles, no resize etc.

<div id="myDiv" contenteditable="true"><p>Sample text!</p><img src="picture.jpg" /></div>

The image can be resized. So you have to explicitly call contenteditable="false" for every block elem you do not want to have handles, as nickf said already for the images.

Even more weird: assign "position:absolute" to any of your elements - even the parent div - and it has handles again.

Answer 6

I cannot comment and vote yet so... according to nmb.ten's answer, you have to use:

document.execCommand("enableObjectResizing", false, false);

But it works only after your content is filled in (I mean if you have to edit some text saved before).