How to set TinyMCE editor height and width
In this article, you will learn how to set the dimensions of the TinyMCE WYSIWYG editor.
By default, the TinyMCE editor has a width of 100% and a height of 400 pixels (including the menu bar, toolbars, and status bar). You can also grab and drag the resize handle at the bottom right corner of the editor interface to manually adjust the editor's height.
These dimensions and dragging capabilities are designed to make it fit within a typical web page layout without requiring any additional adjustments.
The area with the grey background in the above screenshot is the parent element of the TinyMCE editor. You can see that the editor has occupied the entire width of the parent element. Also indicated above are its dimensions. You can see that the default height is 400 (in pixels).
You can simply adjust the width of the TinyMCE editor by changing the width of its parent element.
However, if you would want to change its width without changing that of its parent, or to change its height from the default 400px, below is how to do it.
Changing the TinyMCE editor height
You can adjust the height by adding a height property with a number or string value in the TinyMCE initialization code.
If you provide a number value to the property, TinyMCE will set the height in pixels. Else, you can assign the value as a string and add the units such as px, %, em, rem, and vh.
Example 1
tinymce.init({
selector: '#myTextarea',
height: 500
});
Example 2
tinymce.init({
selector: 'textarea',
height: '30rem'
});
Changing the TinyMCE editor width
To set its width, the width property is used. Similar to height, width accepts both a number or string value. A number value is by default set in pixels while a string value depends on the units used (eg. px, %, em, rem, and vh).
Example 1
tinymce.init({
selector: '#myTextarea',
width: 450
});
Example 2
tinymce.init({
selector: '#myTextarea',
width: '450px'
});
Controlling TinyMCE editor resize behavior
As you may have noticed, dragging the resize handle only resizes the editor vertically while the width remains fixed.
You can use the resize property to enable both vertical and horizontal resizing of the editor or to disable both.
The resize property accepts three values which include true, false, and both.
The default value is true, which enables vertical resizing only. False disables resizing entirely, the resize handle will be disabled (hidden) and a user will not be able to resize the editor. The true value enables both vertical and horizontal resizing.
Example 1
Enabling resizing of the TinyMCE editor in all directions.
tinymce.init({
selector: 'textarea',
resize: 'both'
});
Example 2
Disabling the resizing of the TinyMCE editor entirely.
tinymce.init({
selector: 'textarea',
resize: false
});
Setting the TinyMCE editor's maximum and minimum height
With vertical resizing enabled, users can stretch or shrink the editor as they wish. However, the default minimum height on shrinking is 100px.
The min_height property sets the minimum height that a user can shrink the entire TinyMCE interface. On the other hand, the max_height property sets the maximum height that a user can stretch the TinyMCE interface.
Unlike height and width, the min_height and max_height accept only numbers. If you use a string value it won't have any impact.
Example
tinymce.init({
selector: 'textarea',
height: 300,
min_height: 200,
max_height: 400
});
Setting the TinyMCE editor's maximum and minimum width
The min_width property sets the minimum width that a user can shrink the TinyMCE interface horizontally. On the other hand, the max_width property sets the maximum width that a user can stretch the TinyMCE interface horizontally.
Similarly to the above, only use numbers as values for these properties.
Example
tinymce.init({
selector: 'textarea',
resize: 'both',
width: 550,
min_width: 500,
max_width: 700
});
That's it!
Now you know how to set and control the width and height for the TinyMCE editor.
