jqueryui将图像拖动到contentEditable div中，并将其放置在文本中的该位置

我有一个jqueryui可拖动的图像和一个包含text/html且contentEditable=true的jqueryui可拖放的div

我希望能够将图像拖动到contentEditable文本上，当我将其拖放时，我希望能够将图像拖放到该文本/字符位置

我已经找到了很多方法来做到这一点，如果我单击或选择可编辑的文本，然后使用选定的文本范围拖动图像，但当我只是拖动图像并将其放下时，没有选择任何文本

如何在contentEditable text on drop事件中设置选定/光标位置

有人帮忙吗

多谢各位

---

里克

这个问题已经在这个网站的其他地方得到了回答：

那里的解决方案有特定于每个浏览器的代码（通过功能检测），目前仅适用于Chrome和Firefox。对于Chrome，需要使用

document.caretRangeFromPoint

从鼠标坐标计算范围。对于Firefox，事件对象具有

rangeParent

和

rangeOffset

属性，可用于确定插入符号的位置

document.addEventListener("drop", function(e) {
    var sel = document.getSelection();
    if(document.caretRangeFromPoint) { // Chrome
        var range = document.caretRangeFromPoint(e.clientX,e.clientY);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if(e.rangeParent) { // Firefox
        var range = document.createRange();
        range.setStart(e.rangeParent, e.rangeOffset);
        sel.removeAllRanges();
        sel.addRange(range);
    } else if(sel.rangeCount == 0) { // Default to at least not completely failing
        var range = document.createRange();
        sel.addRange(range);
    }

    // The selection is now in the right place - proceed with whatever the drop should do
});

---

此代码旨在处理可编辑的整个文档-对于可编辑的div，您需要在该div上设置事件侦听器，并修改回退案例，以确保所选内容位于div内。

我不太清楚问题出在哪里。嗨，蒂姆，我在这篇文章中使用了您的代码，以便在我将图像放到contentEditable上时获得光标位置。但这只有在我先单击contentEditable内部，然后将图像拖到其中时才有效。我想做的是不必单击或选择contentEditable中的文本，只需将图像拖放，我想获得鼠标在文本中的位置，这样我就可以将图像代码添加到文本中的该位置。希望这有意义？？？你能帮忙吗？多谢了，这里似乎已经给出了答案：-虽然我不太喜欢这个答案，但我仍在寻找。我在这里找到了一个更令人满意的答案：