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

Question

E.g。我有以下布局：

<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的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中了解详情。

Answer 2

这篇文章对我解决这个问题很重要（适用于tinyMCE）：

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

通过在不满足的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;
}

对于在插入了contentedable元素后执行此行的firefox：

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

Answer 5

我在IE11中遇到与CKEditor 4.4.7相同的问题。作为一种解决方法，我将元素的当前尺寸保存在＆＃34; mousedown＆＃34;并设置＆＃34; min-width＆＃34;，＆＃34; max-width＆＃34;，＆＃34; min-height＆＃34;和＆＃34; max-height＆＃34;样式属性到它的当前尺寸。由此，元素将在调整大小期间以其原始大小显示。 On＆＃34; mouseup＆＃34;我恢复了修改过的元素的样式属性。这是我的代码：

$('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");
        }
    });
});

Answer 6

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

顺便说一句，这不会发生在MS Edge上...手指交叉，这显示了MS在正确方向上的移动：）

Answer 7

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

卸下：

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

为我修好了。

Answer 8

＆＃34;溢出：隐藏;＆＃34;也可能导致这个问题，如：

ul, ol {
  overflow: hidden;
}

Answer 9

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

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

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

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

Answer 10

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

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

确保max-width属性不会影响<p>个元素。

Answer 11

此处或其他线程中没有其他任何人推荐给我，但我通过以下方式解决了这个问题：

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

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

Answer 12

已解决！ 将不可编辑内容的跨度放置在可编辑内容的 BODY 内时，它开始显示可调整大小的 SPAN 容器。解决我的问题的唯一方法是简单的单行CSS样式 指针事件：无； 位于内部 SPAN 标签上。

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

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