移除contentEditable div上的调整大小处理程序

Question

我创建了一个contentEditable的div，用作富文本框。它周围有调整大小的处理程序，我想摆脱它们。你有任何想法吗？

编辑：这似乎是因为我绝对定位了div，所以Firefox会向元素添加一个令人恼火的_moz_resize属性，我无法关闭它。

- Ben McCann

---

开源的，对吧？ :) - Camilo Martin

不，这既不是开源的，也不会成为开源的。 - Ben McCann

作为一种解决办法，可以使用 DIV 的功能等同替代方案，但不会在 content editable 上显示调整大小的处理程序（我刚在 IE 11 或 FireFox 63.0.1 上测试了 ARTICLE）。虽然这不是问题所要求的解决方案，但它是一种权宜之计。但如果您必须要使用此功能，这是一个选项。 - ControlAltDel

Answer 1

顺便提一下，你可以通过向文档发送（有些文档描述不太清晰的）enableObjectResizing 命令来禁用Firefox的自动调整大小功能：

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

据我所知，只有在文档加载完成后才能安全地进行此操作，并且我不知道如何禁用抓取器，因为它是一个独立的功能。

- ZoogieZork

Answer 2

看起来我可以通过添加一个包装 div 并绝对定位包装 div，然后将内部的 div 设为可编辑来解决这个问题。

- Ben McCann

---

这太荒谬了：它在将近五年后仍然表现得一模一样。感谢您提供的解决方案。 - Chris Krycho

是的，没有简单的方法阻止FF和Chrome添加调整大小和移动句柄确实很疯狂。幸运的是，在FF上添加一个包装器<div contenteditable="false">可以同时删除调整大小和移动句柄。它们仍然可能出现在IE11上。 - nevf

Answer 3

我遇到了这个问题。我尝试使用document.execCommand("enableObjectResizing", false, false);，但是移动图标仍然出现。解决我的问题的方法只是在onmousedown事件发生时使用e.preventDefault()。

element.onmousedown = function(e){
       e.preventDefault();
}

- user3502626

Answer 4

在Chrome 39中，即使你想要这些句柄，它们似乎也不存在。

在Firefox中，可以简单地使用execCommand，就像ZoogieZork所回答的那样。

但在Internet Explorer中，这是无法关闭的。必须通过其他方式解决。

在WYMeditor开发中，我找到了以下内容。

以下结果如下：

• 在IE中，调整大小UI会出现一闪而过，然后消失。用户似乎无法使用它。
• 图像在mouseup上被选择为文本。
• 能够拖动图像。在某些浏览器中，可能必须在拖动之前选择它们。如前一项所述，简单的mouseup将导致选择图像。
• 图像使用文本选择而不是“控件选择”（提供调整大小UI）进行选择。

这是经过几个小时的深呼吸后我能想到的最好的方法。如果您真的想摆脱这些句柄，我认为这已经足够好了。

在IE浏览器中，将图像的oncontrolselect设置为返回false确实可以防止出现那些手柄，你可以通过将以下处理程序附加到mousedown事件来巧妙地实现此目的。

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

    if (evt.tagName.toLowerCase() === "img") {
        img = evt.target;
        img.oncontrolselect = returnFalse;
    }
}

它实际上并不完全有效。它不能很好地工作的原因是，在图像上开始拖放操作时，必须按住鼠标一小段时间，而不移动它，然后才能开始拖动。如果按下鼠标并立即开始拖动，则图像将保持在原地而不被拖动。

所以我没有这样做。

我的做法如下。在所有浏览器中，我使用mouseup来专门选择目标图像。在非IE和IE11中，同步进行：

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        selectSingleNode(img); // In my case, I used Rangy
    }
}

在IE 7到10中，异步地：

function (evt) {
    if (evt.target.tagName.toLowerCase() !== "img") {
        return;
    }

    window.setTimeout(function () {
        selectSingleNode(img); // In my case, I used Rangy
    }, 0);
}

这样做可以确保当那些手柄出现后，它们会尽快消失，因为图像失去了“控制选择”，因为该选择被普通文本选择所替换。

在Internet Explorer 7到11中，我附加了一个处理程序到dragend，以删除所有选择：

function (evt) {
    if (evt.target.tagName.toLowerCase() === "img") {
        deselect(); // I use Rangy for this, as well
    }
}

这会使得拖放后出现的手柄消失。

希望这能帮到你，也希望你能进一步完善它。

- Shahar 'Dawn' Or

Answer 5

... 这就是最好的修复方法

<div contenteditable="true">
    <label contenteditable="false"><input/></label>
</div>

或任何包裹您的输入/图像的HTML元素

在IE11上运行得非常好

- kriskate

---

当我点击内部的contenteditable时，在IE11中看到调整大小手柄，但无法正常工作。 - vsync

Answer 6

对于IE11（我没有测试过旧版本的IE，但我觉得它可能行得通），您可以向img标记添加contenteditable =“false”属性。这将防止进行任何重新调整大小操作，同时保持拖放功能。

- Clint

---

句柄仍按照此错误绘制：https://connect.microsoft.com/IE/Feedback/Details/907422 - John McLear

Answer 7

你尝试过添加样式吗？

border: none;

到 div 中吗？

- rosscj2533