Сохранять выбор текста в contenteditable при взаимодействии с диалогом пользовательского интерфейса jQuery и текстовым вводом

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

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

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

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

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

ОТВЕТЫ

Ответ 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();
        }
    }
}