Вставьте текст в курсоре в содержании доступное для редактирования отделение

Question

Вставьте текст в курсоре в содержании доступное для редактирования отделение

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

Это может быть легко сделано в IE document.selection.createRange().text = "banana"

Существует ли похожий способ реализовать это в Firefox/Chrome?

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

Спасибо!

48

javascript contenteditable

задан Community 23 May 2017 в 01:33

1 ответ

Другие вопросы по тегам:

javascript contenteditable

Похожие вопросы:

score 127 · Accepted Answer

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

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;
    }
}

ОБНОВЛЕНИЕ

На основании комментария вот некоторый код для сохранения и восстановления выбора. Перед отображением контекстного меню вы должны сохранить возвращаемое значение 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();
        }
    }
}