Firefox - designMode: disable image resizing handl

问题:

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

回答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;
}

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

回答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.

回答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

回答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.

回答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).