如何将桌面上的图像拖放到编辑器中并四处移动？

Question

当您将某些内容从桌面拖放到文本区域时，默认行为是您将在拖放位置看到图像的路径。我的最终目标是将本地图像转换为 base64 并将其插入到文本中的放置位置。为此，我喜欢开始在放置位置插入文本。

但是当我使用 document.execCommand('insertHTML',null','<b>Some Text</b>'); 时，它会 而不是 将它插入到我将图像拖到那里时光标所在的位置，而是将它插入到在我开始拖动之前我的光标所在的位置。有谁知道如何在放置位置插入文本？

我在以下位置创建了一个小提琴手：http://jsfiddle.net/cqjhm9c5/ 尝试将本地图像文件从桌面拖到文本中。

更新 + 答案

感谢 Julien 在正确的方向上帮助我，我创建了以下代码片段： http://jsfiddle.net/8kodh94k/7/

这将允许您将桌面上的图像拖放到文本中并四处移动。

Answer 1

您可以从鼠标位置设置插入符号。

见Text selection in div(contenteditable) when double click

没有在 IE 上试过，但这似乎适用于 Chrome/Firefox:

function userDidDrop(event) {
    event.preventDefault();
    if (document.caretRangeFromPoint) { //Chrome
        range = document.caretRangeFromPoint(event.clientX, event.clientY);
    } else if (document.caretPositionFromPoint) {//Firefox
        rangePos = document.caretPositionFromPoint(event.clientX, event.clientY);
        range = document.createRange();
        range.setStart(rangePos.offsetNode, rangePos.offset);
        range.collapse(true);
    } else if (document.body.createTextRange) {//IE
        var range = document.body.createTextRange();
        range.moveToPoint(event.clientX, event.clientY);
        range.select();
    }
    window.getSelection().removeAllRanges()
    window.getSelection().addRange(range)

    document.execCommand('insertHTML', null, '<b>Drop</b>');
}

http://jsfiddle.net/ozw6fLv5/1/

如何将桌面上的图像拖放到编辑器中并四处移动？

How can you drop an image from your desktop into an editor and move it around?

html

javascript

contenteditable