javascript - 如何在 contenteditable div 中禁用元素选择和调整大小？

Question

例如我有以下布局:

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

那么，如何禁用它:

还有这个:

Answer 1

我自己在这上面花了很多时间，试图在 CKEditor 中完全隐藏控件选择(这就是它们的名称)。的 widgets .不幸的是，我没有好消息。

方案一

首先，有一个mscontrolselect事件。当我找到它时(事实上它的名字有一个 ms 前缀)我很高兴，因为 according to MS它应该是可以预防的。

但事实证明它完全不稳定。有时会被解雇，有时不会。它因 IE 版本、DOM 结构、属性、您单击的元素、是否为 block 元素等而异。通常的 MS 废话。但是你可以试试:

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

但是，这将完全阻止选择(如果有效)。因此，您将使这些元素根本无法选择。

解决方案2

然后有第二个选项，更可靠 - 在单击此类元素后将选择移动到其他地方。有几种方法可以实现。在 CKEditor 中，我们正在修复 mousedown... 和 mouseup 上的选择，因为(再次)有时它对 IE 来说还不够，它取决于许多条件。您还可以收听 selectionchange 事件并在那里修复选择。

但是，我们同样在谈论阻止选择此类元素。

方案三

因此，第三个选项不是阻止选择，而是阻止 resizestart 事件。 CKEditor 将其与 enableObjectResizing 命令相结合:https://github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218 .此解决方案将阻止调整大小，但当然不会隐藏那些丑陋的边框。

解决方案4

正如我提到的，我在 CKEditor 中解决了这个问题。我们设法使不可编辑的元素在可编辑的内部成为可能，但在浏览器之间具有完全可控和统一的行为。完整的解决方案过于复杂，无法在 StackOverflow 上进行解释，我们花了几个月的时间来实现它。我们将此功能称为小部件。查看一些 demos here . As you can see there are no control selection when non-editable element is selected.选择仅在 mousedown 和 mouseup 之间短暂出现，但仅在特定情况下出现。除此之外，一切都像原生一样工作(尽管它完全是假的)。

在 Introduction to Widgets 中阅读更多内容在Widgets Tutorial .