This plugin automatically resizes the editor to the content inside it. It is typically used to prevent the editor from expanding infinitely as a user types into the editable area. For example, by giving the max_height
option a value the editor will stop resizing when the set value is reached.
Basic setup
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'autoresize'
});
Options
These settings affect the execution of the Autoresize plugin, including changes to the minimum width, height, bottom margin, and default initialization state.
autoresize_bottom_margin
This option allows you to specify the size of the padding
at the bottom of the editor’s body
set on initialization.
Type: Number
Example: Using autoresize_bottom_margin
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'autoresize',
autoresize_bottom_margin: 50
});
autoresize_on_init
Important: This option has been deprecated in TinyMCE 5.10 and will be removed in TinyMCE 6.0.
This option allows you to set whether the editor will attempt to resize itself upon initialization. By default this option is set to true
.
Type: Boolean
Default Value: true
Possible Values: true
, false
Example: autoresize_on_init
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'autoresize',
autoresize_on_init: false
});
autoresize_overflow_padding
This option allows you to specify the size of the padding
at the sides of the editor’s body
set on initialization.
Type: Number
Example: autoresize_overflow_padding
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'autoresize',
autoresize_overflow_padding: 50
});
max_height
The max_height
option has two kinds of behaviors depending on the state of the autoresize
plugin:
-
autoresize
OFF (Default) : Without theautoresize
plugin, this option allows you to set the maximum height that a user can stretch the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface). -
autoresize
ON : With theautoresize
plugin, this option sets the maximum height the editor can automatically expand to.
Type: Number
Example: Using max_height
tinymce.init({
selector: 'textarea', // change this value according to your HTML
max_height: 500
});
Note: If you set the option
resize
tofalse
the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging). Note thatresize
defaults tofalse
when theautoresize
plugin is enabled.
min_height
The min_height option has two kinds of behaviors depending on the state of the autoresize
plugin:
-
autoresize
OFF (Default) : Without theautoresize
plugin, this option allows you to set the minimum height that a user can shrink the entire TinyMCE interface (by grabbing the dragable area in the bottom right of the editor interface). -
autoresize
ON : With theautoresize
plugin, this option sets the minimum height the editor can automatically shrink to.
Type: Number
Example: Using min_height
tinymce.init({
selector: 'textarea', // change this value according to your HTML
min_height: 100
});
Note: If you set the option
resize
tofalse
the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging). Note thatresize
defaults tofalse
when theautoresize
plugin is enabled.
Commands
The Autoresize plugin provides the following JavaScript command.
Command | Description |
---|---|
mceAutoResize | Auto resizes the editor to the contents. |
Example
tinymce.activeEditor.execCommand('mceAutoResize');
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.