例如，我有以下布局：
<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>
那么，如何禁用它：
还有这个：
当我试图在CKEditor的小部件中完全隐藏控件选择（这就是它们的调用方式）时，我自己花了很多时间。不幸的是，我没有好消息。
首先，有一个mscontrolselect事件。当我发现它（以及它的名字有ms前缀的事实）时，我非常高兴，因为根据 MS 的说法，它应该是可以预防的。
但事实证明，它完全不稳定。有时会被解雇，有时不会。它因 IE 版本、DOM 结构、属性、您单击的元素、它是块元素等而异。通常的 MS 废话。但是你可以试试：
function controlselectHandler(evt) {
evt.preventDefault();
}
document.body.addEventListener('mscontrolselect', controlselectHandler);
但是，这将完全阻止选择（如果有效）。因此，您将完全无法选择这些元素。
然后还有第二个选项，更可靠 - 在单击此类元素后将选择移动到其他地方。有几种方法可以实现。在 CKEditor 中，我们正在修复选择mousedown...并且mouseup因为（再次）有时它对 IE 来说还不够，它取决于许多条件。您还可以在selectionchange那里收听事件并修复选择。
然而，同样，我们也在谈论阻止选择此类元素。
因此，第三个选项不是阻止选择，而是阻止resizestart事件。CKEditor 将此与enableObjectResizing命令相结合：https : //github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218。此解决方案将阻止调整大小，但当然不会隐藏那些丑陋的边框。
正如我所提到的，我在 CKEditor 中解决了这个问题。我们设法使不可编辑元素在可编辑中成为可能，但在浏览器之间具有完全可控和统一的行为。完整的解决方案太复杂了，无法在 StackOverflow 上解释，我们花了几个月的时间来实现它。我们将此功能称为小部件。在这里查看一些演示。如您所见，选择不可编辑元素时没有控件选择。选择仅在mousedown和之间的短时间内出现mouseup，但仅在特定情况下出现。除此之外，一切正常，因为它是原生的（尽管它完全是假的）。
这篇文章在为我解决这个问题时很关键（在 tinyMCE 中工作）：
如何使用 contentEditable 和大小样式删除 div 的调整大小手柄和边框
通过将可编辑的 DIV 放在不可编辑的 DIV 中，句柄不会出现在 IE 或 FF 中，但您仍然可以编辑内容
前任。
<div class="outerContainer" contenteditable="false">
<div class="innerContainer" contenteditable="true">
</div>
</div>
解决方案5
当焦点移动到子控件时，将内容可编辑元素属性值更改为 false，并且一旦焦点离开子控件，将内容可编辑设置为 true。
要禁用调整大小的句柄，我所要做的就是为 IE11 添加以下内容：
div {
pointer-events: none;
}
对于在插入 contenteditable 元素后执行此行的 firefox 工作：
document.execCommand("enableObjectResizing", false, false);
对我来说解决问题的是max-width: 100% !important;从contenteditableDIV 中DOM 元素的 CSS 属性中删除一行。希望能帮助到你！
顺便说一句，这不会发生在 MS Edge 上......手指交叉，这表明 MS 向正确方向移动:)