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

【问题标题】：How to disable elements selection and resizing in contenteditable div?如何在 contenteditable div 中禁用元素选择和调整大小？
【发布时间】：2014-03-18 19:30:48
【问题描述】：

例如我有以下布局：

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

那么，如何禁用它：

还有这个：

【问题讨论】：

如果您将跨度设为不可编辑，我不确定这是否可行。
我无法从您提供的 html 元素在 ie11 中重现此问题，但由于 contenteditable 属性，我的应用程序中遇到了同样的问题

标签： javascript html css internet-explorer contenteditable

【解决方案1】：

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

解决方案 1

首先，有一个mscontrolselect 事件。当我找到它时（而且它的名字有一个ms 前缀）我很高兴，因为according to 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 上进行解释，我们花了几个月的时间来实现它。我们将此功能称为小部件。见一些demos here。您可以看到选择不可编辑元素时，没有控制选择。选择仅在mousedown 和mouseup 之间出现，但仅在特定情况下出现。除了一切都可以正常工作（尽管它完全是假的）。

在Introduction to Widgets 和Widgets Tutorial 中了解更多信息。

【讨论】：

【解决方案2】：

这篇文章在为我解决这个问题时非常重要（在 tinyMCE 中工作）：

How to Remove Resize handles and border of div with contentEditable and size style

通过将 contenteditable DIV 放置在 non contenteditable DIV 中，句柄不会出现在 IE 或 FF 中，但您仍然可以编辑内容

例如

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

【讨论】：

我刚刚花了几天时间研究这个，这个解决方案是迄今为止最干净、最简单和交叉兼容的。它不会像其他一些解决方案一样尝试通过捕获鼠标或选择事件来覆盖任何浏览器的默认行为。
谢谢。在 TinyMCE 的内联编辑器中，这似乎只适用于整个编辑器，但现在我仍然可以看到 contenteditable=true div 中各个元素（即
）的轮廓和可调整大小的角。
是的，它隐藏了边框，但它将箭头键导航限制为仅用于 tat 块。 jsfiddle.net/rex3c3yf/2解决这个问题的任何帮助

【解决方案3】：

解决方案 5

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

【讨论】：

【解决方案4】：

要禁用调整大小句柄，我只需为 IE11 添加以下内容：

div {
    pointer-events: none;
}

对于在插入 contenteditable 元素后执行此行的 Firefox 有效：

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

【讨论】：

【解决方案5】：

对我来说解决问题的是从contenteditable DIV 中的DOM 元素的CSS 属性中删除max-width: 100% !important; 行。希望对您有所帮助！

顺便说一句，这不会在 MS Edge 上发生...手指交叉，这表明 MS 朝正确的方向移动 :)

【讨论】：

【解决方案6】：

我遇到了同样的问题。从这里以前的帖子看来，IE 可以识别某些行为并将添加此段落的焦点/调整大小。对我来说，这是因为我在 contenteditible div 中有一个段落样式。

删除：

div[contenteditble="true"] p{
   min-height:1em;
}

帮我修好了。

【讨论】：

【解决方案7】：

解决了！在将不可编辑的跨度放置在可编辑的BODY 中时，它开始显示可调整大小的SPAN 容器。刚刚解决我的问题的是一个简单的单行 CSS 样式 pointer-events: none; 在内部 SPAN 标记上。

min-width: 1.5cm;
display: inline-block;
pointer-events: none;

<body content-editable="true">
  <span>Sample Text</span>
</body>

【讨论】：

也许为你解决，但我不认为这是“解决”，因为你假设其他人不希望允许用户点击 contenteditable，但禁用它，事实上，在很多情况下，您仍然希望允许点击。
另外，一个完全相同的答案比你早几年写在这里...（作者*Kevin Lee）
仅供参考，kevin Lee 建议在父
元素（不在子上）添加指针事件：在我的情况下，这并没有解决问题。此外，如果我们更改子属性的属性，您仍然可以使用父
上的点击事件使其保持可点击状态

【解决方案8】：

overflow:hidden 也可能导致此问题，例如：

ul, ol {
  overflow: hidden;
}

【讨论】：

【解决方案9】：

我在 IE11 中使用 CKEditor 4.4.7 时遇到同样的问题。作为一种解决方法，我将元素的当前尺寸保存在“mousedown”上，并将“min-width”、“max-width”、“min-height”和“max-height”样式属性设置为其当前尺寸。这样，元素将在调整大小期间以其原始大小显示。在“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");
        }
    });
});

【讨论】：

【解决方案10】：

这是我为解决此问题所做的。对我来说，这只会在 contenteditable 元素为空并且当有内容时调整大小句柄会消失时才会发生，所以我创建了以下 CSS 唯一解决方案来解决这个问题：

[contenteditable]:empty:after {
  content: " ";
}

解决方案背后的想法是，每当contenteditable 字段为空时，它都会应用一个空白伪元素，从而在用户选择contenteditable 字段时删除调整大小标签。一旦用户输入任何内容，伪元素就会消失。

注意，由于使用了伪元素，此修复仅适用于 IE9 及更高版本。

【讨论】：

【解决方案11】：

我遇到了同样的问题，因为我将最大宽度的 CSS 规则放在了 contenteditable 中的所有子元素上。删除它或将其限制为图像就可以了。

[contenteditable] * { max-width: 100%; } // causes the issue
[contenteditable] img { max-width: 100%; } // works fine for me

确保没有<p> 元素受到 max-width 属性的影响。

【讨论】：

【解决方案12】：

这里或其他线程中没有其他人推荐的东西对我真正有用，但我通过这样做解决了它：

[contenteditable="true"] p:empty {
    display: inline-block;
}

这样调整大小框就消失了，但我仍然可以将光标设置在 P 块下方或 P 块中以对其进行编辑。

【讨论】：