javascript - How to disable elements selection and resizing in contenteditable div?

contenteditable javascript (8)

"overflow: hidden;" also can cause this issue, like:

ul, ol {
  overflow: hidden;

E.g. I have the following layout:

<div contenteditable="true">
   <span class="text-block" contenteditable="false">
      <span contenteditable="false">Name</span>
      <a href="javascript:void(0)">
          <i class="small-icon-remove"></i>

So, how to disable this:

and this:

Solution 5

When the focus is moved to child control change the content editable element attribute value to false and same way once your focus leaves from child control again set the content editable to true.

I had the same problem because I put CSS rules for the max-width onto all child elements within the contenteditable. Removing it or restricting it to images did the trick.

[contenteditable] * { max-width: 100%; } // causes the issue
[contenteditable] img { max-width: 100%; } // works fine for me

Make sure that no <p> elements are affected by the max-width property.

I had the same problem. It appears that from previous posts here there are certain behaviors that IE recognizes and will add this paragraph focus/resize. For me it was because I had a style for paragraphs within the contenteditible div.


div[contenteditble="true"] p{

Fixed it for me.

I spent on this a lot of time myself, when trying to completely hide control selections (this is how they are called) in CKEditor's widgets. Unfortunately I don't have a good news.

Solution 1

First of all, there's a mscontrolselect event. When I found it (and the fact that its name has an ms prefix) I was very happy, because according to MS it should be preventable.

But it turned out that it's totally unstable. Sometimes it is fired, sometimes it isn't. It varies between IEs versions, DOM structure, attributes, which element you click, is it a block element, etc. The usual MS's crap. But you can try:

function controlselectHandler(evt) {
document.body.addEventListener('mscontrolselect', controlselectHandler);

However, this will completely block selection (if it worked). So you'll make those elements unselectable at all.

Solution 2

Then there's a second option, more reliable - moving selection somewhere else after such element was clicked. There are few ways this can be implemented. In CKEditor we're fixing selection on mousedown... and mouseup because (again) sometimes it's not enough for IE and it depends on dozen of conditions. You could also listen to selectionchange event and fix selection there.

However, again, we're also talking about blocking selection of such element.

Solution 3

Therefore, the third option is to block not selection, but the resizestart event. CKEditor combines this with enableObjectResizing command: This solution will prevent resizing, but of course will not hide those ugly borders.

Solution 4

As I mentioned, I worked on this problem in CKEditor. We managed to make it possible to have non-editable elements inside editable, but with completely controllable and unified behaviour between browsers. The complete solution is too complex to be explained on and it took us months to implement it. We called this feature widgets. See some demos here. As you can see there are no control selection when non-editable element is selected. The selection appears on a short moment only between mousedown and mouseup, but only in specific cases. Except for that everything works as it would be native (although it's a completely fake thing).

Read more in the Introduction to Widgets and in the Widgets Tutorial.

Nothing anyone else recommended here or in other threads really worked for me, but I solved it by doing:

[contenteditable="true"] p:empty {
    display: inline-block;

This way the resize boxes disappeared, but I could still set my cursor below or in the P blocks to edit them.

To disable the resize handles, all I had to do was add the following for IE11:

div {
    pointer-events: none;

For firefox executing this line after the contenteditable element has been inserted works:

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

What solved the problem for me was removing a max-width: 100% !important; line from the CSS properties of the DOM elements within the contenteditable DIV. Hope it helps!

BTW this does not happen on MS Edge... fingers crossed that this shows a movement in the right direction by MS :)