将图像拖放到 Chrome 中的 contenteditable 到光标处

2022-01-11 00:00:00 google-chrome drag-and-drop javascript contenteditable

在 Firefox 中，如果我将图像从桌面拖到 contenteditable 字段中，它将作为 base64 嵌入到突出显示的光标位置.

In Firefox, if I drag an image into a contenteditable field from the desktop, it will be embedded as base64 TO the HIGHLIGHTED cursor position.

JSFiddle:http://jsfiddle.net/zupa/YrwsS/

现在在 Chrome 中，图像由浏览器打开(页面加载，尝试相同的小提琴).

Now in Chrome, the image is opened by the browser (pageload, try in same fiddle).

感谢 HTML5，您可以捕捉 drop 事件，并用它捕捉图像.但是，如果我停止浏览器的默认行为，我会卡在不知道用户想要删除它的位置.

Thanks to the HTML5 you can catch the drop event, and catch the image with it. But if I stop browsers default behavior, I am stuck not knowing where the user wanted to drop it.

您能提出解决方法吗?

推荐答案

如果你能得到放置位置的坐标(我认为这一定是可能的)，你可以按如下方式进行(未经测试).我假设您将放置位置相对于视口的坐标作为变量 x 和 y 并将放置的图像作为变量 img:

If you can get the co-ordinates of the drop location (which I assume must be possible), you can do it as follows (untested). I'm assuming you've got the co-ordinates of the drop location relative to the viewport as variables x and y and the dropped image as the variable img:

演示:http://jsfiddle.net/KZqNj/

代码:

var range;

// Try the standards-based way first
if (document.caretPositionFromPoint) {
    var pos = document.caretPositionFromPoint(x, y);
    range = document.createRange();
    range.setStart(pos.offsetNode, pos.offset);
    range.collapse();
    range.insertNode(img);
}
// Next, the WebKit way
else if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(x, y);
    range.insertNode(img);
}
// Finally, the IE way
else if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToPoint(x, y);
    var spanId = "temp_" + ("" + Math.random()).slice(2);
    range.pasteHTML('<span id="' + spanId + '">&nbsp;</span>');
    var span = document.getElementById(spanId);
    span.parentNode.replaceChild(img, span);
}

这将适用于最近的 WebKit、Opera 和 Mozilla 浏览器，尽管只有 Firefox 具有 document.caretPositionFromPoint() 的实现.

This will work in recent-ish WebKit, Opera and Mozilla browsers, although only Firefox has an implementation of document.caretPositionFromPoint().

参考资料:

  • http://dev.w3.org/csswg/cssom-view/#dom-document-caretpositionfrompoint

相关文章