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

StackOverflow https://stackoverflow.com/questions/1926525

题

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

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

alt text

有帮助吗？

解决方案 2

它看起来像我就可以通过添加一个包装DIV绝对定位包装，然后使内DIV CONTENTEDITABLE来解决这个问题。

其他提示

正如一个侧面说明，您可以通过发送（有点不良的记录）enableObjectResizing命令将文件禁用Firefox的自动调整大小手柄功能：

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

据我所知，这只能安全地执行一次文件已加载，而且也没有办法，我知道的禁用采集卡，这是一个单独的功能。

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

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

我希望这对您有所帮助，并且希望您能做得更好。

有关IE11（我没有带测试了旧版本的IE，但我觉得这是可行的），你可以添加CONTENTEDITABLE =“false”属性的img标签。这将防止任何调整大小的同时保持拖放到位正在做。

...只是有史以来最好的修复

<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？

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top