javascript 如何在 contenteditable div 中禁用元素选择和调整大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21864047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable elements selection and resizing in contenteditable div?
提问by Andrei
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:
还有这个：
采纳答案by Reinmar
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.
当我试图在CKEditor的小部件中完全隐藏控件选择（这就是它们的调用方式）时，我自己花了很多时间。不幸的是，我没有好消息。
Solution 1
方案一
First of all, there's a mscontrolselectevent. When I found it (and the fact that its name has an msprefix) I was very happy, because according to MSit should be preventable.
首先，有一个mscontrolselect事件。当我发现它（以及它的名字有ms前缀的事实）时，我非常高兴，因为根据 MS 的说法，它应该是可以预防的。
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:
但事实证明，它完全不稳定。有时会被解雇，有时不会。它因 IE 版本、DOM 结构、属性、您单击的元素、它是块元素等而异。通常的 MS 废话。但是你可以试试：
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
解决方案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 mouseupbecause (again) sometimes it's not enough for IE and it depends on dozen of conditions. You could also listen to selectionchangeevent and fix selection there.
然后还有第二个选项，更可靠 - 在单击此类元素后将选择移动到其他地方。有几种方法可以实现。在 CKEditor 中，我们正在修复选择mousedown...并且mouseup因为（再次）有时它对 IE 来说还不够，它取决于许多条件。您还可以在selectionchange那里收听事件并修复选择。
However, again, we're also talking about blocking selection of such element.
然而，同样，我们也在谈论阻止选择此类元素。
Solution 3
解决方案3
Therefore, the third option is to block not selection, but the resizestartevent. CKEditor combines this with enableObjectResizingcommand: 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.
因此，第三个选项不是阻止选择，而是阻止resizestart事件。CKEditor 将此与enableObjectResizing命令相结合：https: //github.com/ckeditor/ckeditor-dev/blob/a81e759/plugins/wysiwygarea/plugin.js#L211-L218。此解决方案将阻止调整大小，但当然不会隐藏那些丑陋的边框。
Solution 4
解决方案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 mousedownand mouseup, but only in specific cases. Except for that everything works as it would be native (although it's a completely fake thing).
正如我所提到的，我在 CKEditor 中解决了这个问题。我们设法使不可编辑元素在可编辑中成为可能，但在浏览器之间具有完全可控和统一的行为。完整的解决方案太复杂了，无法在 StackOverflow 上解释，我们花了几个月的时间来实现它。我们将此功能称为小部件。在这里查看一些演示。如您所见，选择不可编辑元素时没有控件选择。选择仅在mousedown和之间的短时间内出现mouseup，但仅在特定情况下出现。除此之外，一切正常，因为它是原生的（尽管它完全是假的）。
Read more in the Introduction to Widgetsand in the Widgets Tutorial.
回答by Baron
This post was critical when solving this issue for me (works in tinyMCE):
这篇文章在为我解决这个问题时很关键（在 tinyMCE 中工作）：
How to Remove Resize handles and border of div with contentEditable and size style
如何使用 contentEditable 和大小样式删除 div 的调整大小手柄和边框
By placing a contenteditable DIV within a non contenteditable DIV the handles do not appear in IE or FF but you can still edit the content
通过将可编辑的 DIV 放在不可编辑的 DIV 中，句柄不会出现在 IE 或 FF 中，但您仍然可以编辑内容
Ex.
前任。
<div class="outerContainer" contenteditable="false">
<div class="innerContainer" contenteditable="true">
</div>
</div>
回答by user3698559
Solution 5
解决方案5
When the focus is moved to child control change the content editable element attribute value to false and same way once your focus leaves from child control again set the content editable to true.
当焦点移动到子控件时，将内容可编辑元素属性值更改为 false，并且一旦焦点离开子控件，将内容可编辑设置为 true。
回答by Kevin Lee
To disable the resize handles, all I had to do was add the following for IE11:
要禁用调整大小的句柄，我所要做的就是为 IE11 添加以下内容：
div {
pointer-events: none;
}
For firefox executing this line after the contenteditable element has been inserted works:
对于在插入 contenteditable 元素后执行此行的 firefox 工作：
document.execCommand("enableObjectResizing", false, false);
回答by Federico Cismondi
What solved the problem for me was removing a max-width: 100% !important;line from the CSS properties of the DOM elements within the contenteditableDIV. Hope it helps!
对我来说解决问题的是max-width: 100% !important;从contenteditableDIV 中DOM 元素的 CSS 属性中删除一行。希望能帮助到你！
BTW this does not happen on MS Edge... fingers crossed that this shows a movement in the right direction by MS :)
顺便说一句，这不会发生在 MS Edge 上......手指交叉，这表明 MS 向正确方向移动:)
回答by user1364467
I had the same problem. It appears that from previous posts here there are certain behaviors that IE recognizes and will add this paragraph focus/resize. For me it was because I had a style for paragraphs within the contenteditible div.
我有同样的问题。似乎从以前的帖子这里有 IE 识别的某些行为，并将添加此段落焦点/调整大小。对我来说，这是因为我在 contenteditible div 中有一个段落样式。
Removing:
删除：
div[contenteditble="true"] p{
min-height:1em;
}
Fixed it for me.
为我修好了。
回答by Christof
I have the same problem with CKEditor 4.4.7 in IE11. As a workaround, I save the current dimensions of an element on "mousedown" and set the "min-width", "max-width", "min-height" and "max-height" style properties to it's current dimensions. By that the element will be displayed in it's original size during resize. On "mouseup" I restore the style properties of the modified element. Here is my code:
我在 IE11 中使用 CKEditor 4.4.7 也有同样的问题。作为一种解决方法，我将元素的当前尺寸保存在“鼠标按下”上，并将“最小宽度”、“最大宽度”、“最小高度”和“最大高度”样式属性设置为其当前尺寸。通过这种方式，元素将在调整大小期间以其原始大小显示。在“mouseup”上，我恢复了修改元素的样式属性。这是我的代码：
$('textarea').ckeditor().on('instanceReady.ckeditor', function(event, editor) {
var $doc = $(editor.document.$);
$doc.on("mousedown", "table,img", function() {
var $this = $(this);
var widthAttrValue = $this.attr("width");
if (widthAttrValue) {
$this.data("widthAttrValue", widthAttrValue);
}
var widthStyleValue = this.style.width;
if (widthStyleValue) {
$this.data("widthStyleValue", widthStyleValue);
}
var width = widthStyleValue || widthAttrValue || String($this.width())+"px";
var height = this.style.height || $this.attr("height") || String($this.height())+"px";
$this.css({
"min-width": width,
"max-width": width,
"min-height": height,
"max-height": height,
});
$doc.data("mouseDownElem",$this);
}).on("mouseup", function() {
var $elem = $doc.data("mouseDownElem");
if ($elem) {
$elem.removeAttr("height").css("height","");
var widthAttrValue = $elem.data("widthAttrValue");
if (widthAttrValue) {
$elem.attr("width", widthAttrValue);
$elem.removeData("widthAttrValue");
} else {
$elem.removeAttr("width");
}
var widthStyleValue = $elem.data("widthStyleValue");
if (widthStyleValue) {
$elem.removeData("widthStyleValue");
}
$elem.css({
"min-width":"",
"max-width":"",
"min-height":"",
"max-height":"",
"width": widthStyleValue || ""
});
if (!$.trim($elem.attr("style"))) {
$elem.removeAttr("style");
}
$doc.removeData("mouseDownElem");
}
});
});
回答by Oleg Zemelia Raban
"overflow: hidden;" also can cause this issue, like:
“溢出：隐藏；” 也可能导致此问题，例如：
ul, ol {
overflow: hidden;
}
回答by Mohtashim Shamsi
SOLVED! On placing the non content-editable span within a content-editable BODY, it started showing a resize-able SPANcontainer. What just fix my problem was a simple one-liner CSS style pointer-events: none;on the inner SPANtag.
解决了！将不可内容编辑的跨度放置在可编辑内容的BODY 中时，它开始显示可调整大小的SPAN容器。解决我的问题的是一个简单的单行 CSS 样式 指针事件：无；在内部SPAN标签上。
min-width: 1.5cm;
display: inline-block;
pointer-events: none;<body content-editable="true">
<span>Sample Text</span>
</body>回答by Nej Kutcharian
Here's what I did to fix this problem. For me this would only happen when the contenteditableelement was empty and the resize handles would disappear when there was content so I created the following CSS only solution to go about this:
这是我为解决此问题所做的工作。对我来说，这只会在contenteditable元素为空时发生，并且当有内容时调整大小的句柄会消失，所以我创建了以下仅 CSS 解决方案来解决这个问题：
[contenteditable]:empty:after {
content: " ";
}
The idea behind the solution is whenever the contenteditablefield is empty it applies a blank space pseudo element thus removing the resize tags from showing up when the user selects the contenteditablefield. Once the user has entered anything then the pseudo element disappears.
该解决方案背后的想法是，只要该contenteditable字段为空，它就会应用一个空白空间伪元素，从而在用户选择该contenteditable字段时移除调整大小标签。一旦用户输入任何内容，伪元素就会消失。
Note, because of the use of pseudo elements, this fix only works on IE9 and up.
请注意，由于使用了伪元素，此修复仅适用于 IE9 及更高版本。
