How to set the height of CKEditor 5 (Classic Edito

Question

In CKEditor 4 to change the editor height there was a configuration option: config.height.

How do I change the height of CKEditor 5? (the Classic Editor)

Answer 1

Answering my own question as it might help others.

CKEditor 5 no longer comes with a configuration setting to change its height. The height can be easily controlled with CSS.

There is one tricky thing though, if you use the Classic Editor:

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

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

Then the Classic Editor will hide the original element (with id editor1) and render next to it. That's why changing height of #editor1 via CSS will not work.

The simplified HTML structure, after CKEditor 5 (the Classic Editor) renders, looks as follows:

<!-- 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>

In reality the HTML is much more complex, because the whole CKEditor UI is rendered. However the most important element is the "editing area" (or "editing box") marked with a ck-editor__editable class:

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

The "editing area" is the white rectangle where one can enter the text. So to style / change the height of the editing area, it is enough to target the editable element with CSS:

<style>
.ck-editor__editable {
    min-height: 400px;
}
</style>

Answer 2

As for configuring the width of the CKEditor 5:

CKEditor 5 no longer comes with a configuration setting to change its width but its width can be easily controlled with CSS.

To set width of the editor (including toolbar and editing area) it is enough to set width of the main container of the editor (with .ck-editor class):

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

Answer 3

Add it to style sheet :

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

Answer 4

Setting the height via a global stylesheet. Just add to your common .css file (like style.css):

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

Answer 5

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