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

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 );
    } );