发表新帖
发表新帖

How to disable elements selection and resizing in contenteditable div?

前端 未结
关注
12 2195
被撕碎了的回忆
被撕碎了的回忆 2020-12-01 14:16

E.g. I have the following layout:


   
      

        

                      

              相关标签:
12条回答
  • 遥遥无期
    2020-12-01 14:21

    SOLVED! On placing the non content-editable span within a content-editable BODY, it started showing a resize-able SPAN container. What just fix my problem was a simple one-liner CSS style pointer-events: none; on the inner SPAN tag.

    min-width: 1.5cm;
display: inline-block;
pointer-events: none;
    <body content-editable="true">
  <span>Sample Text</span>
</body>

    0 讨论(0)
  • 有刺的猬
    2020-12-01 14:21

    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.

    0 讨论(0)
  • 后悔当初
    2020-12-01 14:26

    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.

    0 讨论(0)
  • 甜味超标
    2020-12-01 14:26

    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);
    0 讨论(0)
  • 眼角桃花
    2020-12-01 14:27

    overflow:hidden also can cause this issue, like:

    ul, ol {
  overflow: hidden;
}
    0 讨论(0)
  • 没有蜡笔的小新
    2020-12-01 14:30

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题