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

Add this to your stylesheet:

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

Answer 2

Just add it to the style tag.

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

Answer 3

Simply you can add this to your CSS file

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

Answer 4

Building on @Jaskaran Singh React solution. I also needed to ensure it was 100% height to it's parent. I achieved this by assigning a ref called "modalComponent" and further adding this code:

editor.editing.view.change(writer => {

   let reactRefComponentHeight = this.modalComponent.current.offsetHeight
   let editorToolbarHeight = editor.ui.view.toolbar.element.offsetHeight
   let gapForgiveness = 5
   let maximizingHeight = reactRefComponentHeight - editorToolbarHeight - gapForgiveness

   writer.setStyle(
      'height',
      `${maximizingHeight}px`,
      editor.editing.view.document.getRoot()
   )
})

Answer 5

I tried to set the height and width on the config but it just didn't work on the classic Editor. I was able to change the height of the editor programmatically on Vue by doing this.

mounted() {
    const root = document.querySelector('#customer_notes');

    ClassicEditor.create(root, config).then(editor=>{
        // After mounting the application change the height
        editor.editing.view.change(writer=>{
            writer.setStyle('height', '400px', editor.editing.view.document.getRoot());
        });
    });
}