Autoresize plugin

The Autoresize plugin automatically adjusts the editor height to match its content. This creates a more intuitive editing experience where the editor grows and shrinks naturally with content. Setting the max_height option would allow you to still control when the content would become scrollable.

Interactive demo

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<div id="container">
    <textarea id="autoresize">
    <h1>Autoresize Plugin Demo</h1>
    <p>This demo shows the autoresize plugin in action. The editor automatically adjusts its height based on content. Try adding or removing content to see the dynamic resizing behavior.</p>
    <div>
        <div><strong>How it works:</strong></div>
        <ul>
          <li>Type or paste content to see the editor expand</li>
          <li>Delete content to see the editor shrink</li>
          <li>The editor respects min/max height set limits</li>
        </ul>
    </div>
    </textarea>
</div>
tinymce.init({
    selector: 'textarea#autoresize',
    plugins: "autoresize lists code",
    toolbar: 'undo redo | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
    // Autoresize options
    min_height: 100,
    max_height: 400,
    autoresize_bottom_margin: 20,
    autoresize_overflow_padding: 10,
  });

Basic setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize'
});

How it works

The Autoresize plugin monitors content changes and automatically adjusts the editor height to accommodate the content. When enabled:

  • The editor initializes and renders based on the minimum height specified by min_height option.

  • As content is added, the editor expands vertically

  • The editor stops expanding when it reaches the max_height limit

  • The resize handle is removed from the editor.

Options

These settings control the autoresize behavior, including height limits, padding, and margins.

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

Default value: 50

Example: adding bottom margin for better content spacing

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_bottom_margin: 60 // 50px is the default value
});

Example: setting bottom margin to zero

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

Default value: 1

Example: adding horizontal padding for better content spacing

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_overflow_padding: 50
});

Example: setting horizontal padding to zero

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  autoresize_overflow_padding: 0
});

max_height

The max_height option has different behaviors depending on whether the autoresize plugin is enabled:

  • Without autoresize plugin: Sets the maximum height that users can manually resize the entire TinyMCE interface by dragging the resize handle in the bottom-right corner.

  • With autoresize plugin: Sets the maximum height the editor can automatically expand to when content is added.

Type: Number

Example: using max_height

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'autoresize',
  max_height: 600
});

  • If the resize option is set to false, the resize handle will be disabled and users cannot manually resize the editor.

  • The resize option defaults to false when the autoresize plugin is enabled.

  • Values are specified in pixels without units.

  • If max_height is not set when using the autoresize plugin, the editor will default to the standard max_height behavior (unlimited height expansion).

min_height

The min_height option has different behaviors depending on whether the autoresize plugin is enabled:

  • Without autoresize plugin: Sets the minimum height that users can manually shrink the entire TinyMCE interface by dragging the resize handle in the bottom-right corner.

  • With autoresize plugin: Sets the minimum height the editor can automatically shrink to when content is removed.

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 users cannot manually resize the editor.

  • The resize option defaults to false when the autoresize plugin is enabled.

  • Values are specified in pixels without units.

  • Setting min_height too low may cause usability issues on mobile devices.

  • If min_height is not set when using the autoresize plugin, the editor will default to the standard min_height value of 100 pixels.

Commands

The Autoresize plugin provides the following TinyMCE command.

Command Description

mceAutoResize

Automatically resizes the editor to fit its current content.

Manual autoresize trigger

The mceAutoResize command can be used to manually trigger the autoresize functionality. This is useful when:

  • Content is dynamically added or removed programmatically

  • The editor needs to be resized after external changes

  • You want to ensure the editor size matches its content at a specific moment

Example: triggering autoresize manually
// Resize the active editor
tinymce.activeEditor.execCommand('mceAutoResize');

// Resize a specific editor by ID
tinymce.get('my-editor-id').execCommand('mceAutoResize');