Как вставить изображение по позиции курсора?

Question

[Lorem Ipsum]

Всем привет! Как вставить выбранное изображение из wp.media по позиции курсора в Trumbowyg ?
На сайте есть страница с добавлением статей (аналог редактора wordpress, но на фронт части, не в админке).
Требуется сделать прикрепление изображений к статье, как в стандартном редакторе WP. Использую wp.media. После того как пользователь выбрал изображение по событию 'select' надо добавить выбранное изображение в то место, где стоит курсор в Trumbowyg. Пока с помощью append сделал, но этот вариант не подходит

mediaUploader.on('select', function () {
        attachment = mediaUploader.state().get('selection').first().toJSON();
        $('.trumbowyg-editor').append('<img src="'+attachment.url+'" title="'+attachment.title+'"  alt="'+attachment.alt+'">');
    });

Answer 1

[Вова Дружаев]

Используй insertAtCaret

https://gist.github.com/mathiasbynens/326491

Comments

[Lorem Ipsum]

Спасибо за ответ, проблема в том, что фокус пропадает с textarea, когда открывается модально библиотека изображений WP

[Вова Дружаев]

Lorem Ipsum, это не проблема - проверил сейчас - когда теряется фокус с окна, где в середине текста курсор - потом табом тыкая - возвращается именно на середину текста - т.е. ровно туда откуда он и пропал

[Lorem Ipsum]

Владимир Дружаев, хм, возможно у меня проблема в том, что вместо обычной textarea я использую Trumbowyg, и он заменяет textarea на < div contenteditable="true" >

[Вова Дружаев]

Тогда надо узнавать у автора библиотеки как возвращать фокус. Нативный браузерный textarea все понимает. А его tinyMCE и подхватывает в вордпресс

[Lorem Ipsum]

Владимир Дружаев, спасибо, буду разбираться

[Lorem Ipsum]

Владимир Дружаев,
Решение:

mediaUploader.on('select', function () {
    attachment = mediaUploader.state().get('selection').first().toJSON();
    insertImageAtCursor(attachment.url, attachment.title, attachment.alt);
});
function insertImageAtCursor(src, title, alt) {
    var sel, range;
    var image = document.createElement('img');
    image.src = src;
    image.title = title;
    image.alt = alt;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( image );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().innerHTML = image;
    }
}