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

Posted 2023-05-08

【中文标题】jqueryui 将图像拖入 contentEditable div 并将其放在文本中的该位置

【英文标题】：jqueryui drag image into a contentEditable div and drop it at that position within the text

【发布时间】：2012-09-07 12:48:51

【问题描述】：

我有一个 jqueryui 可拖动图像和一个 div，它是一个 jqueryui droppable，包含文本/html，并且 contentEditable=true。

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

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

如何在放置事件时在 contentEditable 文本中设置选定/光标位置？

有人帮忙吗？

谢谢 瑞克

【问题讨论】：

我不太清楚问题是什么。

嗨，蒂姆，当我将图像放到 contentEditable 上时，我已经在 jsfiddle.net/rmossuk/qLQtK/2 中使用了您的代码来获取光标位置。但这仅在我首先单击 contentEditable 内部然后将图像拖入其中时才有效。我想要做的不是在 contentEditable 中单击或选择文本，只需将图像拖入并拖放，我想获取鼠标在文本中的位置，以便我可以将图像代码添加到文中的位置。希望这是有道理的？？？你能帮我吗 ？非常感谢

这似乎已经在这里得到了回答：***.com/questions/3006623/… - 虽然我不太喜欢这个答案，但我仍在寻找。

我在这里找到了更满意的答案：***.com/questions/14678451/…

***.com/questions/10654262/…

【参考方案1】：

此问题已在本网站的其他地方得到解答：Precise Drag and Drop within a contenteditable

那里的解决方案具有特定于每个浏览器的代码（通过功能检测），目前仅适用于 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 内。