Как вы можете поместить изображение со своего рабочего стола в редактор и переместить его?

Question

Поведение по умолчанию, когда вы перетаскиваете что-то со своего рабочего стола на текстовое поле, заключается в том, что вы увидите путь к изображению в том месте, где вы его перетаскивали. Моя конечная цель состоит в том, чтобы преобразовать локальное изображение в base64 и вставить его в положение сброса в тексте. Для этого мне нравится начинать вставлять текст в положение перетаскивания.

Но когда я использую document.execCommand('insertHTML',null','<b>Some Text</b>'); он не вставит его в положение, в котором находился мой курсор, когда я перетаскивал туда изображение, но он вставит его в положение, в котором находился мой курсор, прежде чем я начал перетаскивать. Кто-нибудь знает, как вставить текст в позиции сброса?

Я создал скрипач по адресу: http://jsfiddle.net/cqjhm9c5/ Попробуйте перетащить локальный файл изображения с рабочего стола в текст.

ОБНОВЛЕНИЕ + ОТВЕТ

Благодаря тому, что Жюльен помог мне в правильном направлении, я создал следующий фрагмент: http://jsfiddle.net/8kodh94k/7/

Это позволит вам перетащить изображение с рабочего стола в текст и переместить его.

Answer 1

Вы можете установить каретку с позиции мыши.

См. Выбор текста в div(contenteditable) при двойном щелчке

Не пробовал в 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/