Сохранять выделение текста в contenteditable при взаимодействии с JQuery UI Dialog и вводом текста

Question

У меня есть диалоговое окно jQuery для создания ссылок в области содержимого. Проблема заключается в том, что нажатие кнопки для открытия диалогового окна приводит к потере выделения, а ввод текста внутри диалогового окна также приводит к потере выделения.

Я могу исправить кнопку с -moz-user-select: нет; но -webkit-user-select: в Chrome ничего не работает.

Я могу исправить ввод, обернув его в iframe, но это грязно, и нажатие в любом другом месте также убивает выделение, например, перетаскивая диалоговое окно.

Я видел решение на Как сохранить выделение текста при открытии диалогового окна jQuery , но это не работает во многих браузерах в contenteditable элементе, только реальные входные данные.

Есть ли хорошее решение моей проблемы?

Answer 1

Вы можете сохранить и восстановить выбор, используя простые функции, такие как следующие, когда диалог открывается и закрывается.Я недостаточно знаком с диалоговыми окнами jQuery, чтобы знать механизм подключения к открытию и закрытию диалога.Первый, saveSelection, возвращает вам объект Range или TextRange, который вы должны сохранить в переменной, которую вы позже передаете 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();
        }
    }
}