How to set the height of CKEditor 5 (classic editor)

Question

In CKEditor 4, there was a configuration option to change the height of the editor: config.height .

How to change the height of CKEditor 5? (classic editor)

Answer 1

Answering my question, as this may help others.

CKEditor 5 no longer comes with a configuration setting to change its height. Height is easily controlled using CSS.

There is one trick 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 hides the original element (with the identifier editor1 ) and editor1 next to it. Therefore, changing the height of #editor1 through CSS will not work.

The simplified HTML structure after rendering CKEditor 5 (classic editor) is 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> 

HTML is actually a lot more complicated because the whole CKEditor interface is displayed. However, the most important element is the “editing area” (or “editing field”), marked with the ck-editor__editable_inline :

 <div class="... ck-editor__editable ck-editor__editable_inline ..."> ... </div> 

An “editing area” is a white rectangle into which you can enter text. Therefore, to stylize / change the height of the editing area, just aim the edited element using CSS:

 <style> .ck-editor__editable_inline { min-height: 400px; } </style> 

Answer 2

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

Answer 3

Set height using the global stylesheet. Just add to your shared .css file (e.g. style.css):

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

Answer 4

Regarding the CKEditor 5 width setting:

CKEditor 5 no longer comes with a configuration setting to change its width, but its width can be easily controlled using CSS.

To set the width of the editor (including the toolbar and the editing area), it is enough to set the width of the main editor container (with the .ck-editor class):

 <style> .ck.ck-editor { max-width: 500px; } </style> 

Answer 5

Add it to the stylesheet:

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

Answer 6

If you want to do this programmatically, the best way to do this is to use a plugin. You can easily do this 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 want to add this to a custom assembly, you can use the following plugin.

 class NumRowsPlugin 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 CKEditor called "minHeight", which sets the minimum editor height, which can be used as follows.

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