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
});

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 the autoresize 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 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
  max_height: 500
});

Note: If you set the option resize 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 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 the autoresize 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 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 JavaScript command.

Example

tinymce.activeEditor.execCommand('mceAutoResize');

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.