Как получить позицию каретки внутри contenteditable div с html дочерними элементами?

Question

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

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

Мне нужно кросс-браузерное решение, которое позволит мне сохранить позицию каретки, чтобы ее можно было восстановить.разделить секунду спустя даже при наличии html-элементов в текстовом потоке.

Пример: http://jsfiddle.net/wPYMR/2/

Answer 1

Я ответил на очень похожий вопрос здесь: Редактирование содержимого Iframe в IE - проблема с поддержанием выделения текста

Вот несколько упрощенная версия этого ответа:

Если вы не изменяете содержимое элемента contenteditable, тогда подойдут следующие функции. Позвоните saveSelection(), прежде чем делать то, что вам нужно, и restoreSelection(), потом. Если вы изменяете содержимое, я бы предложил использовать мой Rangy библиотечный модуль выбора сохранения / восстановления .

var saveSelection, restoreSelection;
if (window.getSelection) {
    // IE 9 and non-IE
    saveSelection = function() {
        var sel = window.getSelection(), ranges = [];
        if (sel.rangeCount) {
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
        }
        return ranges;
    };

    restoreSelection = function(savedSelection) {
        var sel = window.getSelection();
        sel.removeAllRanges();
        for (var i = 0, len = savedSelection.length; i < len; ++i) {
            sel.addRange(savedSelection[i]);
        }
    };
} else if (document.selection && document.selection.createRange) {
    // IE <= 8
    saveSelection = function() {
        var sel = document.selection;
        return (sel.type != "None") ? sel.createRange() : null;
    };

    restoreSelection = function(savedSelection) {
        if (savedSelection) {
            savedSelection.select();
        }
    };
}

Пример использования:

var sel = saveSelection();
// Do stuff here
restoreSelection(sel);

Answer 2

Я опубликовал вопрос о кросс-браузерной библиотеке выбора / выбора и нашел несколько замечательных вещей, с помощью которых я смог решить все мои потребности.

Вот мой пост: Библиотека диапазонов выбора между браузерами?

Что помогло мне больше всего, так это то, что Ранги Тима Дауна .