How to disable elements selection and resizing in

Question

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>
      </a>
   </span>
​</div>

So, how to disable this:

and this:

Answer 1

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

Answer 2

Here's what I did to fix this problem. For me this would only happen when the contenteditable element was empty and the resize handles would disappear when there was content so I created the following CSS only solution to go about this:

[contenteditable]:empty:after {
  content: " ";
}

The idea behind the solution is whenever the contenteditable field is empty it applies a blank space pseudo element thus removing the resize tags from showing up when the user selects the contenteditable field. Once the user has entered anything then the pseudo element disappears.

Note, because of the use of pseudo elements, this fix only works on IE9 and up.

Answer 3

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.

Answer 4

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) {
    evt.preventDefault();
}
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: https://github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218. 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 StackOverflow 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.

Answer 5

I have the same problem with CKEditor 4.4.7 in IE11. As a workaround, I save the current dimensions of an element on "mousedown" and set the "min-width", "max-width", "min-height" and "max-height" style properties to it's current dimensions. By that the element will be displayed in it's original size during resize. On "mouseup" I restore the style properties of the modified element. Here is my code:

$('textarea').ckeditor().on('instanceReady.ckeditor', function(event, editor) {
    var $doc = $(editor.document.$);
    $doc.on("mousedown", "table,img", function() {
        var $this = $(this);
        var widthAttrValue = $this.attr("width");
        if (widthAttrValue) {
            $this.data("widthAttrValue", widthAttrValue);
        }
        var widthStyleValue = this.style.width;
        if (widthStyleValue) {
            $this.data("widthStyleValue", widthStyleValue);
        }
        var width = widthStyleValue || widthAttrValue || String($this.width())+"px";
        var height = this.style.height || $this.attr("height") || String($this.height())+"px";
        $this.css({
            "min-width": width,
            "max-width": width,
            "min-height": height,
            "max-height": height,                                       
        });
        $doc.data("mouseDownElem",$this);
    }).on("mouseup", function() {
        var $elem = $doc.data("mouseDownElem");
        if ($elem) {
            $elem.removeAttr("height").css("height","");
            var widthAttrValue = $elem.data("widthAttrValue");
            if (widthAttrValue) {
                $elem.attr("width", widthAttrValue);
                $elem.removeData("widthAttrValue");
            } else {
                $elem.removeAttr("width");
            }
            var widthStyleValue = $elem.data("widthStyleValue");
            if (widthStyleValue) {                                      
                $elem.removeData("widthStyleValue");
            } 
            $elem.css({
                "min-width":"",
                "max-width":"",
                "min-height":"",
                "max-height":"",
                "width": widthStyleValue || ""
            });
            if (!$.trim($elem.attr("style"))) {
                $elem.removeAttr("style");
            }
            $doc.removeData("mouseDownElem");
        }
    });
});

Answer 6

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.

Removing:

div[contenteditble="true"] p{
   min-height:1em;
}

Fixed it for me.