Image resize handles in IE's contenteditable mode

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.

Possibly related (but not exact dupe as I thought at first) http://stackoverflow.com/questions/1926525/removing-resize-handlers-on-contenteditable-div — Pekka, Apr 27 '10 at 18:16
Does the image still need to be changeable and generally behave like an image? — Pekka, Apr 27 '10 at 18:28

Teemu · Answer 1 · 2013-08-30T14:58:02.553

8

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

edited Aug 30 '13 at 14:58

answered Feb 20 '12 at 18:17

Teemu

22,918
7
53
106

1

$('
',{'unselectable':'on'}); which should be the same as
works for me in explorer
– kami Nov 30 '12 at 04:13
This... sort of works for me? It renders the image unresizable, but the first click after loading the page still brings up the resize handles, and prevents correct function of click events. If I then click outside the image, the resize handles are cleared - but only if I don't click another image, then the handles stay present on the image they appeared on first! This confuses me somewhat. I use jQuery. – Gert Sønderby Aug 30 '13 at 12:31
@GertSønderby Looks like `unselectable` is deprecated in IE10, maybe 9 too. Anyway, it's not in the documentation, but I'd recall this needs to be set as an attribute, setting a property doesn't work. – Teemu Aug 30 '13 at 15:02
@Teemu, thank's for this solution. However, there is one problem regarding it. When you set `unselectable` -> `on`, it makes the `element` `unresizeable`. The handles are visible on the first click, but if you click the element again they won't appear. The problem is, one can't dragNdrop the element within the `contenteditable` area. Is there a way to make it `draggable` in IE as well? **A side note:** - > `unselectable` works even in `IE11` if it is set via `setAttribute` -> `element.setAttribute('unselectable','on')`. – W.D. Jun 09 '14 at 07:51
@W.D. When `unselectable` is set to an element, it should really be unselectable, hence not possible to make it draggable either. I can't reproduce the first-click issue in IE11, though a deprecated property may behave oddly. – Teemu Jun 10 '14 at 04:28
@Teemu, I was asking whether it is possible to disable image resizing in `IE11` inside a `contenteditable` element, but at the same time make it draggable? The way I know of (`onresizestart`) is not supported as of `IE11`, thus using `element.onresizestart = function(){return false;}` doesn't work in the aforementioned browser, but it does work in older versions of `IE`. – W.D. Jun 10 '14 at 05:46
@W.D. Well, this actually is not related to my answer then : ). Please ask a new question about the issue. – Teemu Jun 10 '14 at 05:50

Gert Sønderby · Answer 2 · 2013-09-25T07:47:53.947

2

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

edited Sep 25 '13 at 07:47

answered Sep 19 '13 at 13:25

Gert Sønderby

713
7
16

As of IE11, this method does not work any more - and it does not appear any other does either. – Gert Sønderby Oct 31 '13 at 13:39
@Gert What version of windows? It works for me on 8.0 and 8.1 – jprado Jul 29 '14 at 21:11
I was using 8.1 at the time, from modern.ie. I admit, I haven't checked this since, assuming that A) things were terrible and B) they were not going to be fixed - but I'm prepared to be positively surprised. :-) – Gert Sønderby Jul 31 '14 at 07:21
2

I'm seeing the same on Win7 / IE11 -- no `controlselect` event is being fired, and the ugly boxes are still there. – Marijn Jun 10 '15 at 10:11
Well... maybe Edge will have something? – Gert Sønderby Jun 11 '15 at 07:15

score 2 · Answer 3 · answered Jun 07 '11 at 06:44

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.

score 1 · Answer 4 · edited Nov 10 '15 at 20:53

1

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.

edited Nov 10 '15 at 20:53

arghtype

4,376
11
45
60

answered Nov 10 '15 at 20:08

kriskate

177
2
2

score 1 · Answer 5 · answered May 18 '11 at 04:04

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/

(This has unfortunately stopped working since IE11.) – Marijn Aug 16 '17 at 09:20 — Marijn, Aug 16 '17 at 09:20

score 0 · Answer 6 · answered Aug 09 '12 at 07:28

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!

The onresizestart="return false;" does not work in IE 11 – Rogala May 05 '15 at 22:24 — Rogala, May 05 '15 at 22:24

Image resize handles in IE's contenteditable mode

6 Answers6

Linked