14

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

dEEf
  • 165
  • 1
  • 1
  • 6

6 Answers6

16

This works fine for Firefox:

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

For IE i've used:

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

nmb.ten
  • 2,158
  • 1
  • 20
  • 18
10

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;
}
nickf
  • 537,072
  • 198
  • 649
  • 721
  • 1
    Works for contenteditable indeed. Doesn't seem to work for designMode. The solution created a new problem though: when an image gets moved around and released, it will create a copy of the image at caret position in the editable area. Any suggestion? – dEEf Nov 14 '08 at 09:00
  • I don't know much about either, so what's the difference between contentEditable and designMode? If designMode isn't working, could you just switch to contentEditable? – nickf Nov 14 '08 at 09:07
  • Found the problem to my previous problem (draggin of image) : mousedown -> event.preventDefault(); Thanks nick, I'm switching to contentEditable... – dEEf Nov 14 '08 at 09:09
  • Hey dEEF, do you have some sample code to disable the resize handles in Firefox. The above code is not working and I didn't think contentEditable works in Firefox. – Luke Jan 14 '09 at 13:16
  • 1
    Setting "contentEditable" to `false` doesn't work for me in IE8. Resizing handles are still there. Curiously, `attachEvent('onresizestart', function(e){ e.returnValue = false })` doesn't prevent resizing either. – kangax Oct 21 '11 at 03:46
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.

Brendon Muir
  • 4,540
  • 2
  • 33
  • 55
1

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.

peterm
  • 11
  • 2
  • 1
    I love how on stackoverflow you never know how your answers will impact other, maybe in years to come. This: "Even more weird: assign "position:absolute" to any of your elements - even the parent div - and it has handles again." saved me lots of trouble right now :) – Adi Ulici Dec 18 '15 at 07:17
1

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

0

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

elture
  • 1