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

I can't get this working when using designMode in Firefox. I have tried the CSS property, -moz-user-select and that is not working either.

Any ideas how to stop the resize handers on the image. I am trying it with the http://projects.bundleweb.com.ar/jWYSIWYG/ control. When I add an image to the demo in Firefox the resize handlers appear.

Any idea how I could modify this so the resize handlers do not appear in Firefox and IE?

Would it be possible to block the click event for images so the resize handler doesn't appear?

Answer 3

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 4

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 5

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 6

This works fine for Firefox:

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

For IE i've used:

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