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

In the case of ReactJS.

         <CKEditor
          editor={ClassicEditor}
          data="<p>Hello from CKEditor 5!</p>"
          onInit={editor => {
            // You can store the "editor" and use when it is needed.
            // console.log("Editor is ready to use!", editor);
            editor.editing.view.change(writer => {
              writer.setStyle(
                "height",
                "200px",
                editor.editing.view.document.getRoot()
              );
            });
          }}
      />

Answer 2

If you use jQuery and the CKEditor 5 has to be applied to a textarea, there is a "quick and dirty" solution.

The condition:

<textarea name='my-area' id='my_textarea_id'>

If you use jQuery the Editor call could be:

var $ref=$('#my_textarea_id');

ClassicEditor
    .create( $ref[0] ,{
        // your options
    } )
    .then( editor => {
        // Set custom height via jQuery by appending a scoped style
        $('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: 200px !important;}</style>').insertAfter($ref);

    } )
    .catch( error => {
        console.error( error );
    } );

In other words, after rendering, you can address the same element used to build the editor and append after a scoped style tag with containing the custom height.

$('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: 200px !important;}</style>').insertAfter($ref);

If you like to use a function (or some class method) to do this, you need something like this:

var editorBuildTo = function(id,options){
  var options=options || {};
  //Height represents the full widget height including toolbar
  var h = options.height || 250; //Default height if not set
  var $ref = $('#'+id);
  
  h=(h>40?h-40:h);//Fix the editor height if the toolbar is simple

  ClassicEditor
    .create( $ref[0] ,{
        // your options
    } )
    .then( editor => {
        // Set custom height via jQuery
        $('<style type="text/css" scoped>.ck-editor .ck-editor__editable_inline {min-height: '+h+'px !important;}</style>').insertAfter($ref);
    } )
    .catch( error => {
        console.error( error );
    } );
}

editorBuildTo('my_textarea_id',{
  height:175,
  // other options as you need
});

This works well for me

Answer 3

This CSS Method works for me:

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

Answer 4

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

Answer 5

Just test it's work. Hoping help you

var editor_ = CKEDITOR.replace('content', {height: 250});

Answer 6

From CKEditor 5 version 22 the proposed programmatic solutions are not working. Here it is how I get the work done:

ClassicEditor.create( document.querySelector( '#editor' ) )
    .then( editor => {
        editor.ui.view.editable.element.style.height = '500px';
    } )
    .catch( error => {
        console.error( error );
    } );

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

<div>
  <textarea id="editor">Hi world!</textarea>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>