How to get Cursor-position innerhalb contenteditable div mit html-Kind-Elemente?

Ich beantwortet habe eine sehr ähnliche Frage hier: Bearbeiten von Iframe-Inhalten im IE - problem in der Aufrechterhaltung der text-Auswahl

Hier ist eine leicht vereinfachte version der Antwort:

Wenn Sie nicht ändern Sie den Inhalt des contenteditable-element dann die folgenden Funktionen tun. Rufen Sie saveSelection() bevor man das tut, was Sie tun müssen und restoreSelection() danach. Wenn Sie die änderung des Inhalts, ich würde vorschlagen, mit meinen Feingliedrig Bibliothek speichern/wiederherstellen-Auswahl-Modul.

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

Beispiel verwenden:

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