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:

<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_inline 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_inline {
    min-height: 400px;
}
</style>

Answer 2

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

Answer 3

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

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

Answer 4

If you wish to do this programatically, the best way to do it is to use a Plugin. You can easily do it as follows. The following works with CKEditor 5 version 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 );
    });

Or if you wish to add this to a custom build, you can use the following plugin.

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

This adds a new configuration to the CKEditor called "minHeight" that will set the editor minimum height which can be used like this.

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

Answer 5

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 6

Add it to style sheet :

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