How to disable elements selection and resizing in

2019-01-11 16:56发布

站内问答 / JavaScript
768 12 4

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:

enter image description here

and this:

enter image description here

12条回答
Animai°情兽
2楼-- · 2019-01-11 17:11

This post was critical when solving this issue for me (works in tinyMCE):

How to Remove Resize handles and border of div with contentEditable and size style

By placing a contenteditable DIV within a non contenteditable DIV the handles do not appear in IE or FF but you can still edit the content

Ex.

<div class="outerContainer" contenteditable="false">
    <div class="innerContainer" contenteditable="true">
    </div>
</div>
查看更多
0人赞 添加讨论(0) 举报
我想做一个坏孩纸
3楼-- · 2019-01-11 17:16

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) 举报
来，给爷笑一个
4楼-- · 2019-01-11 17:16

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.

查看更多
0人赞 添加讨论(0) 举报
Fickle 薄情
5楼-- · 2019-01-11 17:18

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) 举报
地球回转人心会变
6楼-- · 2019-01-11 17:19

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

ul, ol {
  overflow: hidden;
}
查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
7楼-- · 2019-01-11 17:23

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.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)