Set cursor an bestimmte position in CKEditor

Die grundlegende Art und Weise der Einstellung ist durch erstellen eine Bereichdie Einstellung seiner position und auswählen.

Hinweis: wenn Sie nicht wissen, den Bereich API (oder zumindest die Idee, die dahinter steht reicht), werden Sie nicht in der Lage zur Auswahl. Hier ist eine ziemlich gute Einführung - DOM-Range-spec (ja, es ist eine Spezifikation, aber es ist gut). CKEditor Bereich API ist sehr ähnlich, aber etwas größer.

Beispiel:

//Having this HTML in editor:
//<p id="someId1">foo <em id="someId2">bar</em>.</p>

var range = editor.createRange();
range.setStart( editor.document.getById( 'someId1' ), 0 ); //<p>^foo
range.setEnd( editor.document.getById( 'someId2' ).getFirst(), 1 ); //<em>b^ar</em>

editor.getSelection().selectRanges( [ range ] );

//Will select:
//<p id="someId1">[foo <em id="someId2">b]ar</em>.</p>

Oder anderen Fall:

//Having this HTML in editor:
//<p>foo bar.</p>
var range = editor.createRange();
range.moveToElementEditablePosition( editor.editable(), true ); //bar.^</p>

editor.getSelection().selectRanges( [ range ] );

//Will select:
//<p>foo bar.^</p>

Wiederherstellen Auswahl nach der änderung DOM

Aber sehr oft wollen Sie nicht wählen Sie eine neue Palette, aber für die Wiederherstellung einer alten Auswahl oder Bereich. Erste Sache, die Sie wissen müssen ist, dass es unmöglich korrekt wiederherstellen Auswahl, wenn Sie einen unkontrollierten DOM-änderungen. Sie müssen in der Lage sein zu verfolgen, der Container und die offsets der Auswahl des start-und end.

Bereich hält die Verweise auf die start-und end-Container (in startContainer und endContainer Eigenschaften). Leider werden diese Verweise können verletzt werden durch:

• überschreiben innerHTML,
• bewegen DOM-Knoten um,
• löschen von DOM-Knoten.

Das gleiche kann passieren, mit offsets (startOffset und endOffset Eigenschaften) - wenn Sie entfernt eine der start/Ziel-container untergeordneten Knoten diese offsets müssen möglicherweise aktualisiert werden.

So, in manchen Situationen reichen Instanz ist nicht hilfreich, wenn wir uns erinnern wollen, eine Auswahl position. Ich werde erläutern Sie drei grundlegende Möglichkeiten, um mit diesem problem umzugehen.

Erste, das ist unser plan:

1. Wir bekommen die aktuelle Auswahl position.
2. Wir speichern es (irgendwie).
3. Wir tun das DOM ändert.
4. Wir wieder einen Auswahl.

Hinweis: Von nun an benutze ich "reicht" im plural, weil Firefox unterstützt mehrere bereichsauswahlen - eine Auswahl enthalten kann, die mehr als einen Bereich (versuchen Sie z.B., verwenden Sie STRG-Taste gedrückt, während Sie Auswahlen).

Lösung 1 - durch eine Reihe

var ranges = editor.getSelection().getRanges();

//Make DOM changes.

editor.getSelection().selectRanges( ranges );

Dies ist die einfachste Lösung. Es wird nur funktionieren, wenn das DOM-änderungen, die wir gemacht haben nicht veraltet reicht, oder wir wissen, wie Sie zu aktualisieren.

Lösung-2 - durch eine aufdringliche Lesezeichen

var bookmarks = editor.getSelection().createBookmarks();

//Make DOM changes.

editor.getSelection().selectBookmarks( bookmarks );

Lesezeichen erstellt durch die createBookmarks Methode insert unsichtbar <span> Elemente mit speziellen Eigenschaften (einschließlich data-cke-bookmark) bei der Auswahl der Bereiche start-und end-Punkte.

Wenn Sie können, vermeiden Sie die unkontrollierte innerHTML verpasst und stattdessen hinzufügen/entfernen/verschieben einiger Knoten, dann denken Sie einfach daran, dass Sie um den Erhalt dieser <span> Elemente und diese Methode funktioniert perfekt. Sie können auch Lesezeichen verschieben' von Elementen, wenn Sie Ihre änderungen sollten ändern Sie die Auswahl als gut.

Standardmäßig Lesezeichen halten Sie Verweise auf Ihre <span> Elemente, aber Sie können auch serializable-Lesezeichen vorbei true zu den createBookmarks Methode. Diese Art von Lesezeichen halten Referenzen auf Knoten-ids, so können Sie überschreiben gesamte innerHTML.

Hinweis: Diese Methode ist auch in einer Bereich API.

Dies ist die beliebteste Methode, denn Sie haben die volle Kontrolle über die Auswahl und Sie können ändern, DOM, obwohl Sie brauchen zu kümmern, Lesezeichen' spans.

Lösung 3 - von einem nicht aufdringlich Lesezeichen

var bookmarks = editor.getSelection().createBookmarks2();

//Make DOM changes.

editor.getSelection().selectBookmarks( bookmarks );

Hinweis: In dieser Lösung verwenden wir createBookmarks2 Methode.

Hier erstellen wir Ihnen auch ein array mit Lesezeichen Objekte, aber wir stecken Sie nicht alle Elemente in DOM. Diese Lesezeichen speichern Sie Ihre Positionen durch die Adressen. Adresse ist ein array von Vorfahren Indizes in Ihre Eltern.

Diese Lösung ist sehr ähnlich wie Lösung 1, aber Sie können überschreiben gesamte innerHTMLweil es (höchstwahrscheinlich ;>) wird sich nicht ändern die Adressen von Lesezeichen' Knoten. Obwohl, in solch einem Fall sollten Sie pass true zu createBookmarks2 um die normalisierten Adressen, da benachbarte Textknoten zusammengeführt werden und leere entfernt, wenn die Einstellung innerHTML.

Zusammenfassend...

... In Zusammenarbeit mit DOM und die Auswahl ist nicht trivial. Sie müssen wissen, was Sie tun, müssen Sie wissen, DOM, und Sie müssen, um die richtige Lösung für Ihr problem. Am häufigsten wird es die zweite, aber es hängt vom Fall.

InformationsquelleAutor der Antwort Reinmar