关于javascript：将图片拖放到可在Chrome中编辑的内容到光标


Drop image into contenteditable in Chrome to the cursor

在Firefox中，如果我将图像从桌面拖动到一个内容可编辑的字段中，则它将作为base64嵌入到突出显示的光标位置。

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

现在，在Chrome中，浏览器会打开图像(页面加载，请尝试使用相同的小提琴)。

多亏了HTML5，您可以捕获放置事件并捕获图像。 但是，如果我停止浏览器的默认行为，就会卡住，不知道用户要将其放置在哪里。

您可以提出解决方法吗？

如果可以获取放置位置的坐标(我认为这是必须的)，则可以按以下步骤进行操作(未经测试)。 我假设您已将相对于视口的放置位置的坐标作为变量x和y，将放置的图像作为变量img：

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

码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 + '"></span>');
    var span = document.getElementById(spanId);
    span.parentNode.replaceChild(img, span);
}

尽管只有Firefox具有document.caretPositionFromPoint()的实现，但这将在最近使用的WebKit，Opera和Mozilla浏览器中运行。

参考文献：

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