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.