如何在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的小部件中试图完全隐藏控件选择(这就是它们的调用方式)时,我自己花了很多时间.不幸的是,我没有一个好消息.

解决方案1

首先,有一个mscontrolselect事件.当我发现它(以及它的名字有ms前缀的事实)时,我非常高兴,因为根据MS,它应该是可以预防的.

但事实证明它完全不稳定.有时会被解雇,有时则不会.它在IE版本,DOM结构,属性,您单击的元素,它是块元素等之间有所不同.通常的MS的废话.但你可以尝试:

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

但是,这将完全阻止选择(如果它有效).因此,您将使这些元素完全无法选择.

解决方案2

然后是第二个选项,更可靠 - 在点击这样的元素之后在其他地方移动选择.实现这一点的方法很少.在CKEditor中我们正在修改选择mousedown...并且mouseup因为(有时)它对IE来说还不够,它取决于十几个条件.您还可以在selectionchange那里收听事件并修复选择.

然而,我们再次讨论阻止选择这种元素.

解决方案3

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

解决方案4

正如我所提到的,我在CKEditor中解决了这个问题.我们设法让不可编辑的元素在可编辑内部,但在浏览器之间具有完全可控和统一的行为.完整的解决方案太复杂,无法在StackOverflow上解释,我们花了几个月的时间来实现它.我们称这个功能为小部件.在这里看一些演示.如您所见,当选择不可编辑元素时,没有控件选择.选择仅在mousedown和之间的短时间内出现mouseup,但仅在特定情况下.除此之外,一切都是原生的(尽管这是完全假的).

阅读" 窗口小部件简介"和" 窗口小部件教程"中的更多内容.

Answer 2

这篇文章对我解决这个问题很重要(在tinyMCE中工作):

如何使用contentEditable和大小样式删除调整大小的句柄和div的边框

通过在不可信的DIV中放置一个可信的DIV,句柄不会出现在IE或FF中,但您仍然可以编辑内容

防爆.

<div class="outerContainer" contenteditable="false">
    <div class="innerContainer" contenteditable="true">
    </div>
</div>

Answer 3

解决方案5

当焦点移动到子控件时,将内容可编辑元素属性值更改为false,并且一旦焦点从子控件离开,再次将内容可编辑设置为true.

Answer 4

要禁用调整大小的句柄，我所要做的就是为 IE11 添加以下内容：

div {
    pointer-events: none;
}

对于在插入 contenteditable 元素后执行此行的 Firefox 工作：

document.execCommand("enableObjectResizing", false, false);