Вставить текст в курсор в редактируемом содержимом div

У меня есть contenteditable div, где мне нужно вставить текст в позицию каретки,

Это легко сделать в IE с помощью document.selection.createRange().text = "banana"

Есть ли аналогичный способ реализации этого в Firefox/Chrome?

(Я знаю, что существует решение здесь, но оно не может использоваться в контентном div и выглядит неуклюже)

Спасибо!

Ответ 1

Следующая функция вставит текст в позицию каретки и удалит существующий выбор. Он работает во всех основных настольных браузерах:

function insertTextAtCursor(text) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

UPDATE

Исходя из комментариев, здесь приведен код для сохранения и восстановления выбора. Перед отображением контекстного меню вы должны сохранить возвращаемое значение saveSelection в переменной, а затем передать эту переменную в restoreSelection, чтобы восстановить выбор после скрытия контекстного меню и перед вставкой текста.

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

Ответ 2

Получить объект выделения с помощью window.getSelection().
Используйте Selection.getRangeAt(0).insertNode(), чтобы добавить текстовый файл.

При необходимости переместите позицию курсора за добавленным текстом с помощью Selection.modify(). (Не стандартизировано, но эта функция поддерживается в Firefox, Chrome и Safari).

function insertTextAtCursor(text)
{
    let selection = window.getSelection();
    let range = selection.getRangeAt(0);
    range.deleteContents();
    let node = document.createTextNode(text);
    range.insertNode(node);

    for(let position = 0; position != text.length; position++)
    {
        selection.modify("move", "right", "character");
    };
}

Ответ 3

// <div contenteditable id="myeditable">
// const editable = document.getElementById('myeditable')
// editable.focus()
// document.execCommand('insertHTML', false, '<b>B</b>anana')
document.execCommand('insertText', false, 'banana')

Ответ 4

просто более простой метод с jquery:

скопировать все содержимое div

var oldhtml=$('#elementID').html();

var tobejoined='<span>hii</span>';

//element with new html would be

$('#elementID').html(oldhtml+tobejoined);

просто!