8

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

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

替代文字

4

7 回答 7

14

顺便说一句，您可以通过向文档发送（文档记录不佳的）enableObjectResizing命令来禁用 Firefox 的自动调整大小处理功能：

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

AFAIK，只有在文档加载后才能安全地完成此操作，而且我不知道如何禁用抓取器，这是一个单独的功能。

于 2009-12-18T19:21:56.247 回答
12

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

于 2009-12-18T18:31:33.357 回答
1

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

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

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

于 2014-12-20T12:20:44.047 回答
1

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

element.onmousedown = function(e){
       e.preventDefault();
}
于 2016-10-23T06:05:43.273 回答
0

对于 IE11（我还没有测试过旧版本的 IE，但我觉得它可以工作）你可以在 img 标签中添加 contenteditable="false" 属性。这将防止在保持拖放到位的同时进行任何重新调整大小。

于 2015-01-21T05:11:00.623 回答
0

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

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

或任何包装您的输入/图像的 html 元素

像魅力一样在 IE11 上运行

于 2015-11-10T20:02:21.517 回答
-4

您是否尝试过添加样式

border: none;

到div？

于 2009-12-18T17:21:06.617 回答