删除ContentEditable Div上的调整大小处理程序

正如一个旁注,您可以通过发送(有点糟糕的文档记录)来禁用火狐的自动调整手柄功能。 enableObjectResizing 对文档的命令:

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

对于Afaik,这只能在加载文档后才能安全地完成,而且我不知道如何禁用抓取器,这是一个单独的功能。

看起来我可以通过添加一个wrapperDIV并绝对定位wrapper,然后使内部DIV内容可编辑来解决这个问题。

在Chrome39中,这些手柄似乎不存在,即使你想要它们。

在火狐中,人们可以简单地使用 execCommand 就像动物园的回答。

但在Internet Explorer中,这无法关闭。它必须在周围工作。

在 WYMeditor 发展,这是我发现的。

结果如下:

• 在IE中,调整大小的UI会显示一秒钟,然后消失。用户似乎无法使用它。
• 图像是在上选择的文本 mouseup
• 能够拖动图像。在某些浏览器中,在拖动之前可能必须选择它们。如前一项所述,简单的 松开鼠标 将导致选择图像。
• 使用文本选择而不是“控制选择”(提供调整大小用户界面)选择图像。

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

在伊江,设置 oncontrolselect 归来 false 在图像上,确实可以防止这些句柄出现,并且可以通过将以下处理程序附加到 mousedown 事件:

function (evt) {
    var img;

    function returnFalse() {
        return false;
    }

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

它实际上并不完全有效。它不能很好地工作的原因是,为了开始对图像执行拖放操作,必须按住鼠标一秒钟,而不移动鼠标,然后才开始移动鼠标进行拖动。如果按下鼠标并立即开始拖动,图像将保持在其位置,而不会被拖动。

所以我没有这么做。

我所做的如下。在所有浏览器中,我都使用 松开鼠标 以文本方式选择目标图像。在非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
    }
}

这使得在拖放后显示的句柄消失。

我希望这有帮助,我希望你能做得更好。

对于IE11(我没有测试旧版本的IE,但我觉得它可以工作),您可以向img标记添加contenteditable=“false”属性。这将防止在保持拖放到位的同时重新调整大小。

…是有史以来最好的解决方法

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

或包装输入/img的任何HTML元素

像个魔咒一样在IE11上工作

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

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

你试过添加样式吗

border: none;

到DIV?