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

Question

我创建了一个contentEditable div，用作丰富的textarea。它已经调整了周围的处理程序，我想摆脱它。知道我是怎么做的吗？

编辑：这似乎正在发生，因为我绝对定位div，因此Firefox为我无法关闭的元素添加了一个令人愤怒的_moz_resize属性。

Answer 1

正如旁注，您可以通过向文档发送（有些记录不清的）enableObjectResizing命令来禁用Firefox的自动调整大小句柄功能：

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

AFAIK，这只能在文档加载后安全地完成，并且我无法知道禁用抓取器，这是一个单独的功能。

Answer 2

看起来我可以通过添加一个包装器div并绝对定位包装器然后使内部div contentEditable来解决这个问题。

Answer 3

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

这使拖放后显示的手柄消失。

我希望这会有所帮助，我希望你能做得更好。

Answer 4

对于IE11（我已经测试了旧版本的IE，但我觉得它会起作用）你可以添加contenteditable =＆＃34; false＆＃34;属性为img标签。这样可以防止在保持拖放的同时进行任何重新调整大小。

Answer 5

......只是有史以来最好的解决方案

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

或任何包装你的输入/ img

的html元素

在IE11上工作就像一个魅力

Answer 6

我只是面对那个问题。 我试过了document.execCommand("enableObjectResizing", false, false);，但移动图标仍然出现了。当e.preventDefault()事件发生时，我只是onmousedown解决了我的问题。

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

Answer 7

您是否尝试过添加样式

border: none;

到div？