web-dev-qa-db-fra.com

Comment obtenir les éléments disponibles dans la barre d'outils dans CKEDITOR 5?

Je voulais configurer la barre d'outils dans CKEDITOR 5. J'ai jeté un œil à la documentation.

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

Pourtant, le seul script lié à ma question est:

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

Il est beaucoup trop difficile pour un programmeur frontal de comprendre. Où dois-je mettre ce script? Comment puis-je produire les résultats? Existe-t-il un tutoriel détaillé?

En fait, ce serait bien si CKEDITOR mettait simplement les éléments disponibles dans la documentation. Cela vous évitera bien des ennuis.

Merci!

ckeditor5
11
stonyau

Vous pouvez mettre ce code directement dans le corps des exemples de code que vous pouvez trouver par exemple dans Guide de base de l'API de CKEditor 5 Build . Par exemple:

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

Comme @Szymon Cofalik l'a mentionné dans sa réponse - il n'y a pas de liste unique de boutons disponibles dans toutes les versions. Les versions de CKEditor 5 peuvent différer non seulement visuellement - elles peuvent également contenir différents plugins et donc différents boutons. Ainsi, l'utilisation de cet extrait de code est la solution la plus sûre et la plus évolutive.

9
Reinmar

Exemple de code que vous pouvez utiliser pour répertorier la barre d'outils disponible

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()));
    });
6
Izhari Ishak Aksa

Il est difficile de conserver les noms des plugins au même endroit dans la documentation car:

  • Il existe plusieurs versions qui diffèrent,
  • De nouveaux plugins sont développés et ajoutés.

Si vous souhaitez vérifier quels éléments de la barre d'outils sont disponibles dans la version que vous utilisez actuellement, ouvrez la console du développeur dans le navigateur que vous utilisez et exécutez la ligne de code citée

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

Bien sûr, editor doit être l'instance de l'éditeur.

J'espère que cela répond à votre question.

EDIT: Créer un éditeur est décrit dans la documentation aussi. Mais vous devez affecter l'instance de l'éditeur à la variable editor.

Par exemple:

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

vous pouvez utiliser console.log( Array.from( editor.ui.componentFactory.names() ) ); qui vous donnera:

["undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading", "imageStyle:full", "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"]

0
Dirk J. Faber