如何将图像从桌面拖放到编辑器中并移动它？

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/