Set Height | Ckeditor5

.ck-editor display: flex; flex-direction: column; flex-grow: 1;

.ck-editor__editable height: 100% !important; ckeditor5 set height

When integrating a rich text editor into a web application, one of the most common—and surprisingly tricky—tasks is controlling the editor’s visual real estate. By default, CKEditor 5 is designed to be compact and flexible. However, real-world use cases demand more: a full-page blog post editor, a sleek comment box, or a documentation panel that matches specific UI/UX requirements. Modern web applications often use flexbox or CSS Grid

Modern web applications often use flexbox or CSS Grid. If you want the editor to fill the remaining vertical space of its parent container, use a combination of CSS and JavaScript. editable.style.overflowY = 'auto'

ClassicEditor .create(document.querySelector('#editor')) .then(editor => // Access the editable DOM element const editable = editor.ui.view.editable.element; // Set height via JavaScript editable.style.height = '500px'; editable.style.overflowY = 'auto'; ) .catch(error => console.error(error); );

/* High specificity selector */ .ck.ck-content.ck-editor__editable height: 400px; overflow-y: scroll;

npm install @ckeditor/ckeditor5-autoformat @ckeditor/ckeditor5-auto-resize