Autoresize plugin
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
});
As of version 6.4.1, TinyMCE checks for the TinyMCE resize function entering a loop.
If the function is detected as doing so, the document’s margin-bottom
value is set to 0, instead of whatever value is assigned to autoresize_bottom_margin
.
This prevents an infinite resizing bug from presenting.
To prevent the resize function from even entering this loop, autoresize_bottom_margin
must be set to a value less than any margin-bottom
value set for the document.
Alternatively, if margin-bottom
is set by a CSS declaration, set autoresize_bottom_margin
to 0
.
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
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 sets the maximum height that a user can stretch the entire TinyMCE interface (by grabbing the draggable 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
plugins: 'autoresize',
max_height: 500
});
If the resize option is set to false the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging). Note that resize defaults to false when the autoresize 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 sets the minimum height that a user can shrink the entire TinyMCE interface (by grabbing the draggable 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
Default value: 100
Example: using min_height
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'autoresize',
min_height: 100
});
If the resize option is set to false the resize handle will be disabled and a user will not be able to resize the editor (by manual dragging). Note that resize defaults to false when the autoresize plugin is enabled.
|