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

我创建了一个contentEditable div用作富文本区。它周围有我想摆脱的调整大小的处理程序。知道我该怎么做吗

编辑：之所以出现这种情况，是因为我完全定位了div，所以Firefox在元素中添加了一个我无法关闭的恼人的_moz_resize属性

---

您是否尝试添加样式

border: none;

---

对于div？

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

作为旁注，您可以通过发送

对文档启用objectresizing

命令：

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

---

好了，这只能在文档加载后安全地完成，而且据我所知，没有办法禁用抓取器，这是一个单独的功能。

在Chrome 39中，这些句柄似乎不存在，即使您希望它们存在

在Firefox中，可以简单地使用

execCommand

，就像ZoogieZork回答的那样

但在Internet Explorer中，这无法关闭。这必须加以解决

在开发中，以下是我的发现

结果如下：

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

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

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

在IE 7到10中，异步：

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

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

开源，对吗？：）不，这既不是开源的，也不会是开源的。作为一种解决方案，可以使用功能相同但不显示可编辑内容上的大小调整处理程序的DIV替代方案（我刚刚用IE 11或FireFox 63.0.1上的文章进行了测试）。这不是问题的解决方案-这是一个难题。但是，如果你必须拥有这种功能，这是一种选择。这太荒谬了：几乎五年后，它仍然以同样的方式运行。谢谢你的解决方案。是的，没有简单的方法阻止FF和Chrome添加调整大小和移动手柄，这简直是疯了。幸运的是，添加包装确实会删除FF上的调整大小和移动控制柄。它们仍然可以出现在IE11上。句柄仍然是根据这个错误绘制的：不起作用，我在IE11中单击内部
contenteditable