Wie erhalte ich in CKEDITOR 5 verfügbare Elemente in der Symbolleiste?

Question

Ich wollte die Symbolleiste in CKEDITOR 5 konfigurieren. Ich schaute auf die Dokumentation.

https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/configuration.html

Doch das einzige Skript auf meine Frage bezogen ist:

Array.from(editor.ui.componentFactory.names); 

Es ist viel zu schwierig für einen Frontend-Programmierer zu verstehen. Wo lege ich dieses Skript ab? Wie gebe ich die Ergebnisse aus? Gibt es ein detailliertes Tutorial?

Fakt ist, es wäre schön, wenn CKEDITOR einfach die verfügbaren Artikel in die Dokumentation legt. Das wird eine Menge Ärger retten.

Danke!

Answer 1

Sie diesen Code direkt in den Körper des Codes setzen können Proben, die Sie finden können z.B. in CKEditor 5 Build's Basic API guide. Z.B .:

ClassicEditor 
    .create(document.querySelector('#editor')) 
    .then(editor => { 
     console.log(Array.from(editor.ui.componentFactory.names)); 
    }) 
    .catch(error => { 
     console.error(error); 
    }); 

Als @Szymon Cofalik in seiner Antwort erwähnt - es gibt keine einzige Liste der Tasten ist, die verfügbar sind in allen Versionen verfügbar. CKEditor 5 Builds können sich nicht nur optisch unterscheiden - sie können auch verschiedene Plugins und damit verschiedene Buttons enthalten. Daher ist die Verwendung dieses Codeausschnitts die sicherste und zukunftssicherste Lösung.

Answer 2

Es ist schwierig, Plugin-Namen in einem Ort in der Dokumentation zu halten, weil:

• mehrere baut Es gibt die unterscheidet,
• Neue Plugins entwickelt und hinzugefügt.

Wenn Sie prüfen möchten, welche Elemente der Symbolleiste im Build verfügbar sind, sind Sie derzeit offene Entwickler-Konsole im Browser Sie verwenden, und führen Sie die angegebenen Codezeile

Array.from(editor.ui.componentFactory.names); 

Natürlich editor muss die Editorinstanz sein.

Ich hoffe, dies beantwortet Ihre Frage.

BEARBEITEN: Erstellen Editor is described in the documentation auch. Sie müssen jedoch die Editor-Instanz editor Variable zuweisen.

Zum Beispiel:

ClassicEditor 
    .create(document.querySelector('#editor')) 
    .then(editor => { 
     window.editor = editor; 
     // Or alternatively you could paste that line here and look at console. 
    }); 

Answer 3

Beispiel Code, den Sie Ihnen zur Verfügung Symbolleiste zur Liste

können

var editor = ClassicEditor 
    .create(document.querySelector('#editor'), { 
     toolbar: ['headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList'], 
     heading: { 
      options: [ 
       {modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'}, 
       {modelElement: 'heading1', viewElement: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'}, 
       {modelElement: 'heading2', viewElement: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'}, 
       {modelElement: 'heading', viewElement: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'} 
      ] 
     } 
    }) 
    .then(function (editor) { 
     console.log(Array.from(editor.ui.componentFactory.names())); 
    });