在 Firefox 中，如果我将图像从桌面拖到 contenteditable 字段中，它将作为 base64 嵌入到突出显示的光标位置。
JSFiddle：http : //jsfiddle.net/zupa/YrwsS/
现在在 Chrome 中，图像由浏览器打开（页面加载，在同一个小提琴中尝试）。
多亏了 HTML5，您可以捕捉 drop 事件，并用它捕捉图像。但是如果我停止浏览器的默认行为，我就会陷入不知道用户想把它放在哪里的困境。
你能提出一个解决方法吗？
将图像拖放到 Chrome 中的 contenteditable 到光标处
IT技术
javascript
google-chrome
drag-and-drop
contenteditable
2021-02-26 04:56:46
1个回答
如果您可以获得放置位置的坐标（我认为必须是可能的），您可以按如下方式进行（未经测试）。我假设您已经将放置位置相对于视口的坐标作为变量x，y并将放置的图像作为变量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 + '"> </span>');
var span = document.getElementById(spanId);
span.parentNode.replaceChild(img, span);
}
这将适用于最新的 WebKit、Opera 和 Mozilla 浏览器，尽管只有 Firefox 实现了document.caretPositionFromPoint().
参考：
其它你可能感兴趣的问题