CKEditor 5: ClassicEditor is not defined
Der auf Javascript basierende Rich-Text-Editor CKEditor 5 erfreut sich großer Beliebtheit. Die veröffentlichten Beispiele zum Einbinden laufen allerdings zuweilen ins Leere und es heißt: ClassicEditor is not defined.
Problem
Es wurde auf CKEditor 5 download ein bedarfsgemäß konfiguriertes Paket heruntergeladen . Das Einbinden mittels
main.js
ClassicEditor
.create($('#myTextarea'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});
endet mit ClassicEditor is not defined
.
Lösung
Um den Editor korrekt erzeugen zu können, benötigen wir einige Informationen, die uns der Quelltext des Editors verrät. Dazu suchen wir gezielt nach bestimmten Stellen und merken zwei Namen.
- Öffne die eingebundene Javascript-Datei des Editors (z.B.
ckeditor.js
) - Suche nach folgendem Pattern:
exports?exports
- Den auf das Pattern folgenden Bezeichner merken: z.B. ...
typeof exports?exports.CKSource=e()
... ⇒CKSource
- Die letzten Zeichen am Ende von ckeditor.js lauten etwa:
...
.default={Editor:cS}
... ⇒Editor
Damit haben wir alle Information, um den Editor zu erzeugen:
main.js
CKSource.Editor
.create($('#myTextarea'))
.then(editor => {
console.log(editor);
})
.catch(error => {
console.error(error);
});