如何在 contenteditable div 中禁用元素选择和调整大小? [英] How to disable elements selection and resizing in contenteditable div?

问题描述

例如我有以下布局:

<span class="text-block" contenteditable="false"><span contenteditable="false">名称</span><a href="javascript:void(0)"><i class="small-icon-remove"></i></a></span></div>

那么，如何禁用此功能:

还有这个:

解决方案

当我试图在 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 之间的短时间内出现，但仅在特定情况下出现.除此之外，一切都像原生一样(尽管它完全是假的).

在小部件简介和小工具教程.

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:

and this:

解决方案

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.

这篇关于如何在 contenteditable div 中禁用元素选择和调整大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！