web-dev-qa-db-fra.com

Comment régler la hauteur de CKEditor 5 (Classic Editor)

Dans CKEditor 4, pour modifier la hauteur de l'éditeur, une option de configuration était proposée: config.height . 

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

ckeditorckeditor5
21
Wiktor Walc

Répondre à ma propre question car cela pourrait aider les autres.

CKEditor 5 n'est plus livré avec un paramètre de configuration permettant de modifier sa hauteur . La hauteur peut être facilement contrôlée avec CSS.

Il y a cependant une difficulté, si vous utilisez le Classic Editor :

<div id="editor1"></div>

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

Ensuite, l'éditeur classique masque l'élément d'origine (avec l'identifiant editor1) et effectue le rendu à côté de celui-ci. C'est pourquoi changer la hauteur de #editor1 via CSS ne fonctionnera pas.

La structure HTML simplifiée, après le rendu de CKEditor 5 (l'éditeur classique), se présente comme suit:

<!-- This one gets hidden -->
<div id="editor1" style="display:none"></div> 
<div class="ck-reset ck-editor..." ...>
    <div ...>
        <!-- This is the editable element -->
        <div class="ck-blurred ck-editor__editable ck-rounded-corners ck-editor__editable_inline" role="textbox" aria-label="Rich Text Editor, main" contenteditable="true">
            ...
        </div>
    </div>
</div>

En réalité, le code 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 "zone d'édition") marquée d'une classe ck-editor__editable:

<div class="... ck-editor__editable ck-editor__editable_inline ..."> ... </div>

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

<style>
.ck-editor__editable {
    min-height: 400px;
}
</style>
59
Wiktor Walc
editor.ui.view.editable.editableElement.style.height = '300px';
7
daka83

Ajoutez-le à la feuille de style: 

      .ck-editor__editable 
       {
        min-height: 200px !important;
            }
0
Hamza Dastgir

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

CKEditor 5 n'est plus livré avec un paramètre de configuration permettant de 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):

<style>
.ck.ck-editor {
    max-width: 500px;
}
</style>
0
jodator

Réglage de la hauteur via une feuille de style globale. Ajoutez simplement à votre fichier .css commun (comme style.css):

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