How to set the height of CKEditor 5 (Classic Editor)

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:

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:

 

    

        
        

            ...
        
    

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_inline class:

 ... 

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: