Ich habe eine HTML-Struktur wie diese:

<div contenteditable="true">This is some plain, boring content.</div>

Ich habe auch diese Funktion, mit der ich die Caret-Position auf eine beliebige Stelle innerhalb der div einstellen kann:

// Move caret to a specific point in a DOM element
function SetCaretPosition(object, pos)
{
    // Get key data
    var el = object.get(0); // Strip inner object from jQuery object
    var range = document.createRange();
    var sel = window.getSelection();

    // Set the range of the DOM element
    range.setStart(el.childNodes[0], pos);
    range.collapse(true);

    // Set the selection point
    sel.removeAllRanges();
    sel.addRange(range);
}

Dieser Code funktioniert einwandfrei, bis ich anfange, untergeordnete Tags hinzuzufügen(span, b, i, u, strike, sup, sub) zum div, z. B.

<div contenteditable="true">
    This is some <span class="fancy">plain</span>, boring content.
</div>

Dinge werden komplizierter, wenn diese untergeordneten Tags eigene untergeordnete Tags enthalten, z. B.

<div contenteditable="true">
    This is some <span class="fancy"><i>plain</i></span>, boring content.
</div>

Im Wesentlichen, was passiert, ist dassetStart wirft einIndexSizeError wenn ich versucheSetCaretPosition auf einen höheren Index als den Anfang eines untergeordneten Tags.setStart funktioniert nur bis zum ersten untergeordneten Tag.

Was ich brauche, ist für dieSetCaretPosition -Funktion zum Behandeln einer unbekannten Anzahl dieser untergeordneten Tags (und möglicherweise einer unbekannten Anzahl verschachtelter untergeordneter Tags), sodass das Festlegen der Position genauso funktioniert wie ohne Tags.

Also für beides:

<div contenteditable="true">This is some plain, boring content.</div>

und das

<div contenteditable="true">
    This is <u>some</u> <span class="fancy"><i>plain</i></span>, boring content.
</div>

SetCaretPosition(div, 20); würde das Caret vor dem 'b' in 'langweilig' setzen.

Was ist der Code, den ich brauche? Danke vielmals