How to set the CKEditor height and width
By default, the width of CKEditor is set to 100%. That means it covers the entire width of its container element on the page. This is for both versions 4 and 5.
You can simply control its width by adjusting the width of its parent element.
In CKEditor version 4, the default height of the editable area is set to 200 pixels. It also has a resize handle at the bottom right corner which the user can grab and drag up or down to minimize or extend the height. On writing content up to the bottom of the editable area, CKEditor 4 does not expand on its own. A scrollbar emerges instead, which you can use to scroll up or down to view the whole content.
CKEditor version 5, on the other hand, has a very small default height (about 55 pixels) of the editable area. It lacks a resize handle and thus the user cannot shrink or extend its height by dragging. It instead dynamically adjusts its height based on the amount of content inside it.
If for some reason you want to override the defaults and set your custom width and height for CKEditor versions 4 and 5, then the instructions below will help you out.
Setting height and width for CKEditor 4
To set a custom height and width for the CKEditor version 4, simply add the height and width configurations in the CKEditor initialization.
The two properties accept either a number or string value. If you use a number, the dimensions are set to pixels. If you assign a string, make sure to include units such as px, %, em, rem, etc.
Example 1
<script>
CKEDITOR.replace('myTextarea', {
width: '80%',
height: "350px"
});
</script>
Example 2
<script>
CKEDITOR.replace('myTextarea', {
width: 600,
height: 500
});
</script>
In the above two examples, 'myTextarea' is the ID of the textarea integrated with CKEditor.
You can alternatively use CSS to set the width of the editor as below:
#cke_myTextarea {
width: 600px;
}
The "myTextarea" part in the selector is the ID for my textarea. Make sure to replace it with your textarea's ID.
Example
#cke_yourID {
width: 600px;
}
Setting height and width for CKEditor 5
To set a custom width for the CKEditor version 5, simply use CSS with the class ck-editor as the selector and set the width property.
Example
.ck-editor {
width: 500px !important;
}
This will set the editor to have a fixed width of 500 pixels.
Note: Without !important, it won't work.
To set the height of CKEditor 5, you will need to use CSS with the class ck-editor__editable as the selector whereby you set its height property.
Example
.ck-editor__editable {
height: 500px;
}
This will set a fixed height of 500 pixels for the editor. It will override the default behavior of the editor dynamically adjusting its height depending on the amount of content it has. If the amount of content exceeds the set height, a scrollbar will automatically appear to allow the user to scroll up or down for full content viewing.
That's it!
With this, you can comfortably set custom fixed width and height for CKEditor versions 4 and 5 on your web pages. It's my hope that this article was helpful to you.
