Javascript 将图像放入内容可编辑的Chrome中并放到光标上

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

JSFiddle：

现在在Chrome中，图像由浏览器打开（pageload，在同一小提琴中尝试）

多亏了HTML5，你可以捕捉丢弃事件，并用它捕捉图像。但是如果我停止浏览器的默认行为，我就无法知道用户想把它放在哪里

---

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

如果你能得到放置位置的坐标（我认为这一定是可能的），你可以按如下方式操作（未测试）。我假设放置位置相对于视口的坐标是变量

x

和

y

，放置的图像是变量

img

：

演示：

代码：

var范围；
//首先尝试基于标准的方法
if（document.caretPositionFromPoint）{
var pos=文档。caretPositionFromPoint（x，y）；
range=document.createRange（）；
range.setStart（pos.offsetNode，pos.offset）；
range.collapse（）；
range.insertNode（img）；
}
//接下来是WebKit方式
else if（document.caretRangeFromPoint）{
范围=document.caretRangeFromPoint（x，y）；
range.insertNode（img）；
}
//最后，是IE方式
else if（document.body.createTextRange）{
range=document.body.createTextRange（）；
范围。移动点（x，y）；
var spanId=“temp_”+（“”+Math.random（））.slice（2）；
range.pasteHTML（“”）；
var span=document.getElementById（spanId）；
span.parentNode.replaceChild（img，span）；
}

虽然只有Firefox实现了

document.caretPositionFromPoint（）

，但这在最新的ish WebKit、Opera和Mozilla浏览器中都可以使用

参考资料：

---

噢，非常感谢你，我真的被它难住了！对于其他人来说，在Chrome中，它相当于

document.caretRangeFromPoint（x，y）

和

range.setStart（pos.startContainer，pos.startOffset）

@zupa:Ah，对。这是WebKit自己的专有方法；我以为他们现在也实施了基于标准的，但我可能错了。不管怎样，我很乐意帮忙。别担心，你给我指明了正确的方向，这就是我所需要的，真的！该代码在IE11发布之前一直有效。我在IE 11中的range.moveToPoint（）中得到一个“未指定的错误”。document.caretRangeFromPoint和document.caretPositionFromPoint在IE11中都不可用。有什么建议吗？谢谢。@clam:Grr。在IE9和IE10在消除兼容性问题方面取得进展之后，IE11似乎又引入了新的问题。我会调查的。

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);
}