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

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

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

现在在 Chrome 中，图像由浏览器打开（页面加载，尝试使用相同的小提琴）。

感谢 HTML5，您可以捕获放置事件，并用它捕获图像。但是，如果我停止浏览器的默认行为，我就会陷入困境，不知道用户想要将其放在哪里。

你能建议一个解决方法吗？

如果您可以获得放置位置的坐标（我认为这一定是可能的），您可以按如下方式执行（未经测试）。我假设您已经将相对于视口的放置位置的坐标作为变量x and y和下降的图像作为变量img:

Demo: http://jsfiddle.net/KZqNj/ http://jsfiddle.net/KZqNj/

Code:

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().

参考：

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