Skip to main content

Einbindung von CKEditor 5

In diesem Tutorial lernst du, wie du aus einem textarea eine CKEditor 5 Instanz erzeugst.

Als Grundlage nehmen wir das folgende Codeschnipsel im DOM an:

<textarea id="sampleEditor"></textarea>

Initialisierung des Editors

Im JavaScript wird der Editor mit der ELP-Funktion eLP.utils.makeCKEditor(element, config, startValue) initialisiert. Diese erfüllt im Gegensatz zur nativen CKEditor-Einbindung, dass über diese Funktion sowohl eine Instanz mit gegebenem Konfigurationsobjekt initialisiert als auch eine bereits bestehende CKEditor-Instanz an ein neues Konfigurationsobjekt angepasst werden kann. Des Weiteren wird mit dieser Funktion in veralteten Browsern noch CKEditor 4 unterstützt.

Grundsätzlich können alle Konfigurationen des CKEditor 5 übergeben werden, siehe hier. Damit ist das Anpassen der Toolbar mit der Option toolbar möglich.

Auszug aus wichtigen Funktionen zur Steuerung von CKEditor 5 Instanzen

Die Verwendung des CKEditor 5 hat ein paar häufige Tücken, welche hier beschrieben werden sollen. Insbesondere führt CKEditor 5 keine eigene Liste über alle Instanzen, diese wird durch CKEditorIndex geleistet.

CKEditorIndex

Das globale Objekt CKEditorIndex vereinheitlicht die Bedienung von CKEditor 4 und 5. CKEditorIndex.List gibt eine Map, in der jede neue CKEditor 5-Instanz beim erstellen eingetragen wird. Mit .get kann die Instanz zu dazugehöriger ID des Elements, welches durch die CK4 erstetzt wurde. Mit .delete kann eine CKEditor-Instanz vollständig gelöscht werden. Mit .forEach kann eine übergebene Funktion für jeden Eintrag ausgefürt werden und mit .entries wird eine Array mit allen CKEditor-Instanzen zurückgegeben (vergleiche Object.entries)

Wichtige native Funktionen

Die wichtigsten Funktionen von CKEditor 5 sind das Setzen des Textes durch editor.setData(), das Auslesen des Textes durch editor.getData() und das Löschen einer Instanz mit editor.destroy(). Die Funktion editor.updateSourceElement() (bei CKEditor 4 noch editor.updateElement()) stellt sicher, dass der Wert der vom CKEditor ersetzten <textarea> mit dem Inhalt des Editors übereinstimmt.

Zusätzlich gibt editor.dirty an, ob die internen Daten des Editors von ELP verarbeitet wurden (true bedeutet, dass möglicherweise Differenzen zwischen dem Editor und den ELP-internen Daten gesetzt sind). Dieser wird mit editor.resetDirty() auf false zurückgesetzt. Grundsätzlich sollte dies automatisch beim Abwählen des Editors (beispielsweise Klicks auf der Seite außerhalb des Editors) passieren. Wenn es wichtig ist, dass die Daten aller Editoren von ELP verarbeitet wurden (beispielsweise beim Speichern des Portfolios), kann dies mit der Funktion eLP.utils.fixCKEBlur() sichergestellt werden.