Removing resize handlers on contentEditable div

Question

I created a contentEditable div to use as a rich textarea. It has resize handlers around it that I'd like to get rid of. Any idea how I'd do this?

Edit: This appears to be happening because I am absolutely positioning the div, so Firefox adds an infuriating _moz_resize attribute to the element which I cannot turn off.

alt text

No, this is neither open source nor will it be open sourced. — Ben McCann, Dec 18 '09 at 18:10
As a work around, it is possible to use an alternative for DIV that is functionally the same but does not show the resizing handlers on content editable (I just tested with ARTICLE on IE 11 or FireFox 63.0.1) this is not a solution to the question asked - it is a kludge. But is an option if you must have this functionality — ControlAltDel, Apr 17 '19 at 18:47

score 14 · Answer 1 · answered Dec 18 '09 at 19:21

Just as a side note, you can disable Firefox's automatic resize handle feature by sending the (somewhat poorly-documented) enableObjectResizing command to the document:

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

AFAIK, this can only safely be done once the document has loaded, and there's no way I know of to disable the grabber, which is a separate feature.

score 12 · Accepted Answer · answered Dec 18 '09 at 18:31

12

It looks like I'll be able to work around this by adding a wrapper div and absolutely positioning the wrapper and then making the inner div contentEditable.

answered Dec 18 '09 at 18:31

Ben McCann

18,548
25
83
101

This is ridiculous: it still behaves the same way almost five years later. Thanks for the solution. – Chris Krycho Sep 12 '14 at 18:52
1

Yes it is plain crazy that there is no simple way to stop FF and Chrome from adding resize and move handles. Fortunately adding a wrapper
does remove both the resize and move handles on FF. They still can appear on IE11.
– nevf Jan 06 '15 at 05:45

score 1 · Answer 3 · answered Dec 20 '14 at 12:20

In Chrome 39, these handles don't seem to exist, even if you wanted them to.

In Firefox, one can simply use execCommand, like ZoogieZork answered.

But in Internet Explorer this can't be turned off. It must be worked around.

In WYMeditor development, here's what I've found.

The following results in:

In IE, the resize UI shows up for a split second and then disappears. There seems to be no way for the user to use it.
Images are text selected on mouseup
Ability to drag images. In some browsers, they may have to be selected before dragging. As written in the previous item, a simple mouseup will result in an image being selected.
Images are selected using text selection and not "control selection" (that which provides the resize UI).

This is the best I could come up with after hours of very deep breaths. I think it is good enough if you really want to get rid of those handles.

In IE, Setting oncontrolselect to return false on the image, really does prevent those handles from appearing, and you can do it cleverly, by attaching the following handler to the mousedown event:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

    if (evt.tagName.toLowerCase() === "img") {
        img = evt.target;
        img.oncontrolselect = returnFalse;
    }
}

It actually doesn't work completely well. The reason that it didn't work very well is that in order to begin a drag and drop operation on the image, one had to press and hold the mouse, without moving it, for a split second, and only then begin moving it for the drag. If one pressed the mouse and immediately began dragging, the image would remain in its place and not be dragged.

So I didn't do that.

What I did is the following. In all browsers, I used mouseup to text select the target image exclusively. In non-IE and IE11, synchronously:

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        selectSingleNode(img); // In my case, I used Rangy
    }
}

In IE 7 through 10, asynchronously:

function (evt) {
    if (evt.target.tagName.toLowerCase() !== "img") {
        return;
    }

    window.setTimeout(function () {
        selectSingleNode(img); // In my case, I used Rangy
    }, 0);
}

This made sure that after those handles show up, they disappear ASAP, because the image loses its "control selection" because that selection is replaced with a regular text selection.

In Internet Explorer 7 through 11, I attached a handler to dragend that removes all selection:

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        deselect(); // I use Rangy for this, as well
    }
}

This makes the handles that show up after drag and drop, disappear.

I hope this helps and I hope you can make it even better.

score 1 · Answer 4 · answered Oct 23 '16 at 06:05

I just face that problem. I tried document.execCommand("enableObjectResizing", false, false); but, the move icon was still appearing. What just fix my problem was just e.preventDefault() when onmousedown event occurs.

element.onmousedown = function(e){
       e.preventDefault();
}

score 0 · Answer 5 · answered Jan 21 '15 at 05:11

0

for IE11 (I havn't tested the older versions of IE, but I feel like it would work) you can add contenteditable="false" attribute to the img tag. This will prevent any re-sizing from being done while keeping drag and drop in place.

answered Jan 21 '15 at 05:11

Clint

169
1
12

The handles are still drawn as per this bug: https://connect.microsoft.com/IE/Feedback/Details/907422 – John McLear Jan 26 '15 at 23:35

score 0 · Answer 6 · answered Nov 10 '15 at 20:02

0

... just the best fix ever

<div contenteditable="true">
    <label contenteditable="false"><input/></label>
</div>

or any html element that wraps your input/img

Works on IE11 like a charm

answered Nov 10 '15 at 20:02

kriskate

177
2
2

Doesn't work, I see the resize handles in IE11 when clicking on the inner `contenteditable` – vsync Nov 16 '20 at 21:52

score -4 · Answer 7 · answered Dec 18 '09 at 17:21

-4

Have you tried adding the style

border: none;

to the div?

answered Dec 18 '09 at 17:21

rosscj2533

9,195
7
39
56

Removing resize handlers on contentEditable div

7 Answers7

Linked