CKEditor 5: ClassicEditor is not defined

11.01.2022 Web

Achtung: Der Inhalt ist bereits ein wenig älter. Die Information im Text könnten daher nicht mehr zutreffend sein.

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);
        });