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

【问题标题】：How can you drop an image from your desktop into an editor and move it around?如何将图像从桌面拖放到编辑器中并四处移动？
【发布时间】：2015-09-08 12:09:43
【问题描述】：

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

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

我在http://jsfiddle.net/cqjhm9c5/ 创建了一个提琴手，尝试将本地图像文件从您的桌面拖到文本中。

更新+答案

感谢 Julien 帮助我朝着正确的方向发展，我创建了以下 sn-p： http://jsfiddle.net/8kodh94k/7/

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

【问题讨论】：

标签： javascript html contenteditable

【解决方案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/

【讨论】：

它有效，但是，很多时候当我将文本拖入其中时，会从文本中删除一个字符，你注意到了吗？（野生动物园）
我没有在 Safari 上看过它，但是是的，现在我看到了，这是一种奇怪的行为，但它不仅是在拖动时，它似乎也可以通过你的“做某事”按钮来完成?似乎完全是 execCommand insertHTML 的问题。也许添加一些步骤，例如添加一个空格，在该空格之前设置范围，然后插入。看起来过于复杂，但它确实看起来像一个错误。