火狐浏览器 - designMode：禁用图片调整大小手柄

Question

如何在设计模式下防止用户调整图像大小？（单击图像时禁用调整手柄）

- dEEf

Answer 1

这在Firefox中可以正常工作：

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

对于IE，我使用了以下代码：

image.attachEvent("onresizestart", function(e) { e.returnValue = false; }, false);

- nmb.ten

Answer 2

假设你要这样打开contentEditable功能：

document.body.contentEditable = true;

你所需要做的就是关闭所有（或部分）图像。

var imgs = document.getElementsByTagName("IMG");
for (var i = 0; i < imgs.length; ++i) {
    imgs[i].contentEditable = false;
}

- nickf

---

确实适用于contenteditable。但似乎不适用于designMode。然而，该解决方案创建了一个新问题：当图像被移动并释放时，它会在可编辑区域中的插入符位置创建图像的副本。有什么建议吗？ - dEEf

我对这两个都不是很了解，那么contentEditable和designMode有什么区别呢？如果designMode不能工作，你能否切换到contentEditable呢？ - nickf

找到了之前问题的原因（图片拖动）：mousedown -> event.preventDefault();谢谢Nick，我要切换到contentEditable... - dEEf

嘿dEEF，你有一些禁用Firefox中的调整大小手柄的示例代码吗？上面的代码不起作用，而且我认为contentEditable在Firefox中不起作用。 - Luke

将“contentEditable”设置为false在IE8中对我无效。调整大小手柄仍然存在。奇怪的是，attachEvent（'onresizestart'，function（e）{e.returnValue = false}）也无法防止调整大小。 - kangax

Answer 3

我认为你会发现这更加可接受。在Firefox中似乎可以工作，但我不确定其他浏览器是否可以：

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

它保留了拖放功能的完整性。

- Brendon Muir

Answer 4

虽然这个问题很久以前就提出了。 每个块级元素（div、img...）都将使用FF的手柄进行装饰。 测试一下：

<div id="myDiv" contenteditable="true"><p>Sample text!</p></div>

没有句柄，没有调整大小等。

<div id="myDiv" contenteditable="true"><p>Sample text!</p><img src="picture.jpg" /></div>

图片可以调整大小。 因此，您必须明确调用contenteditable="false"以防止每个块元素都具有手柄，就像nickf已经为图像所说的那样。

更奇怪的是： 将"position:absolute"分配给任何一个元素 - 即使是父div - 它也会再次出现手柄。

- peterm

---

我喜欢stackoverflow上的一件事情，就是你永远不知道你的答案会在未来的几年里对别人有什么影响。这个问题的解答：“更奇怪的是：将“position:absolute”分配给任何一个元素 - 甚至是父div - 它就会重新获得句柄。” 现在为我节省了很多麻烦 :) - Adi Ulici

Answer 5

嗯，你无法从Firefox或IE中删除那些调整大小的处理程序...至少我找不到解决方案。

最后，在Firefox中，我通过编辑一些来自FF安装文件夹的配置文件来完成了这个任务，但我们不想这样做，对吧？

无论如何，如果你想禁用图像的调整大小（但调整大小的处理程序仍将可见），只需添加一些CSS样式即可：

img {
    width: auto !important;
    height: auto !important;
}

敬礼， Mihailo

- Mihailo

Answer 6

我还不能发表评论和投票，所以根据nmb.ten的回答，你必须使用：

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

但是它只在您填写内容之后才能正常工作（我的意思是，如果您必须编辑以前保存的某些文本）。

- elture