Comment définir la hauteur de CKEditor 5 (Éditeur classique)

Question

Dans CKEditor 4 pour changer la hauteur de l'éditeur, il y avait une option de configuration : config.height.

Comment puis-je changer la hauteur de CKEditor 5? (l'éditeur classique)

Answer 1

Répondre à ma propre question car cela pourrait aider d'autres personnes.

CKEditor 5 ne dispose plus d'un paramètre de configuration pour changer sa hauteur. La hauteur peut être facilement contrôlée avec du CSS.

Il y a cependant une chose délicate, si vous utilisez le Classic Editor:

ClassicEditor
    .create( document.querySelector( '#editor1' ) )
    .then( editor => {
        // console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

Ensuite, le Classic Editor masquera l'élément d'origine (avec l'id editor1) et le rendra à côté. C'est pourquoi le changement de hauteur de #editor1 via CSS ne fonctionnera pas.

La structure HTML simplifiée, après que CKEditor 5 (le Classic Editor) ait rendu, ressemble comme suit:

            ...

En réalité, le HTML est beaucoup plus complexe, car toute l'interface utilisateur de CKEditor est rendue. Cependant, l'élément le plus important est la "zone d'édition" (ou "boîte d'édition") marquée d'une classe ck-editor__editable_inline:

 ... 

La "zone d'édition" est le rectangle blanc dans lequel on peut entrer du texte. Donc pour styler / changer la hauteur de la zone d'édition, il suffit de cibler l'élément éditable avec du CSS:

.ck-editor__editable_inline {
    min-height: 400px;
}

Answer 2

Définir la hauteur via une feuille de style globale. Il suffit d'ajouter dans votre fichier .css commun (comme style.css):

.ck-editor__editable {
    min-height: 500px;
}

Answer 3

editor.ui.view.editable.editableElement.style.height = '300px';

Answer 4

Si vous souhaitez le faire de manière programmatique, la meilleure façon de le faire est d'utiliser un Plugin. Vous pouvez facilement le faire comme suit. Ce qui suit fonctionne avec CKEditor version 5.12.x

function MinHeightPlugin(editor) {
  this.editor = editor;
}

MinHeightPlugin.prototype.init = function() {
  this.editor.ui.view.editable.extendTemplate({
    attributes: {
      style: {
        minHeight: '300px'
      }
    }
  });
};

ClassicEditor.builtinPlugins.push(MinHeightPlugin);
ClassicEditor
    .create( document.querySelector( '#editor1' ) )
    .then( editor => {
      // console.log( editor );
    })
    .catch( error => {
      console.error( error );
    });

Ou si vous souhaitez ajouter ceci à une version personnalisée, vous pouvez utiliser le plugin suivant.

class MinHeightPlugin extends Plugin {
    init() {
        const minHeight = this.editor.config.get('minHeight');
        if (minHeight) {
            this.editor.ui.view.editable.extendTemplate({
                attributes: {
                    style: {
                        minHeight: minHeight
                    }
                }
            });
        }
    }
}

Ceci ajoute une nouvelle configuration au CKEditor appelée "minHeight" qui définira la hauteur minimale de l'éditeur, qui peut être utilisée comme ceci.

ClassicEditor
    .create(document.querySelector( '#editor1' ), {
      minHeight: '300px'
    })
    .then( editor => {
        // console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

Answer 5

En ce qui concerne la configuration de la largeur du CKEditor 5 :

CKEditor 5 ne dispose plus d'un paramètre de configuration pour changer sa largeur, mais sa largeur peut être facilement contrôlée avec CSS.

Pour définir la largeur de l'éditeur (y compris la barre d'outils et la zone d'édition), il suffit de définir la largeur du conteneur principal de l'éditeur (avec la classe .ck-editor) :

.ck.ck-editor {
    max-width: 500px;
}