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.3, autoresize_bottom_margin must be set to a value below the margin-bottom property of any content CSS, else it will be ignored and set to 0.

Example: setting autoresize_bottom_margin to zero because margin-bottom is set elsewhere

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_bottom_margin: 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

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 the autoresize 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 the autoresize 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 the autoresize 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 the autoresize 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.

Commands

The Autoresize plugin provides the following TinyMCE command.

Command Description

mceAutoResize

Auto resizes the editor to the contents.
Example
tinymce.activeEditor.execCommand('mceAutoResize');