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

问题描述

例如我有以下布局：

 < div contenteditable =true> 
< span class =text-blockcontenteditable =false> 
< span contenteditable =false>名称< / span> 
< a href =javascript：void（0）> 
< i class =small-icon-remove>< / i> 
< / a> 
< / span> 
< / div> 
  

所以，如何禁用：

/ p>

>

解决方案

我花了很多时间自己，当试图完全隐藏控件选择（这是他们的称呼）在 CKEditor 的小部件。不幸的是我没有好消息。

解决方案1 ​​

首先， href =http://msdn.microsoft.com/en-us/library/ie/ms536915%28v=vs.85%29.aspx> mscontrolselect 事件。当我发现它（事实上它的名称有一个 ms 前缀）我很高兴，因为根据MS ，它应该是可以防止的。

它是完全不稳定的。有时它被解雇，有时它不是。它在IE的版本，DOM结构，属性，你点击的元素，它是一个块元素等。通常的MS的废话。但你可以尝试：

  function controlselectHandler（evt）{
 evt.preventDefault 
} 
 document.body.addEventListener（'mscontrolselect'，controlselectHandler）; 
  

但是，这将完全阻止选择

解决方案2

然后是第二个选项，更多可靠 - 在单击此元素后在其他位置移动选择。有几种方法可以实现。在CKEditor中，我们正在修复 mousedown ...和 mouseup 上的选择，因为（有时）它取决于十几个条件。你也可以听 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屋！