Editor size and resize options

Initial dimensions

height

height sets the height of the entire editor, including the menu bar, toolbars, and status bar.

  • If a number is provided, TinyMCE sets the height in pixels by defult.

  • If a string is provided, TinyMCE assumes the value is valid CSS and sets the editor’s height as the string value such as 300px, 50pt, or 10em.

Note: that values such as 100%, 10vh and auto are not currently supported.

Type: Number or String

Default value: 400 or the size of the target element if larger than 400 pixels

Example: using height

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

width

Set the width of the editor.

TinyMCE sets the width in pixels if a number is provided. However, if TinyMCE is provided a string it assumes the value is valid CSS and simply sets the editor’s width as the string value. This allows for alternate units such as %, em and vh.

Type: Number or String

Example: using width

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

Controlling user editor resizing

resize

This option allows the resize handle to be disabled or to set the resize handler to resize both horizontally and vertically. The option can be true, false or the string 'both'. False disables resizing, true enables vertical resizing only, 'both' makes it possible to resize in both directions horizontal and vertical.

When resizing is enabled, the editor can be resized by either:

  • Clicking and dragging the resize handle in the bottom right-hand corner of the editor.

  • Focusing the resize handle, and using the arrow keys. The Up Arrow and Left Arrow keys will make the editor smaller, and the Down Arrow and Right Arrow keys will make the editor larger.

Type: Boolean or String

Default value: true

Possible values: true, false, 'both'

The default value for this option is different for mobile devices. For information on the default mobile option, see: TinyMCE Mobile — Configuration options with mobile defaults.

Example: disabling editor resizing

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

Example: enabling vertical and horizontal editor resizing

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

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
  min_height: 200
});

  • 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.

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

  • 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_width

This option sets the minimum width that a user can stretch the entire TinyMCE interface (by grabbing the draggable area in the bottom right of the editor interface).

This behavior is different from the autoresize plugin, which controls the resizing of the editable area only, not the entire editor.

Type: Number

Example: using min_width

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  min_width: 400
});
By default the resize handle does not allow horizontal dragging and giving this key a value will not result in an observable behavior.

max_width

This option sets the maximum width that a user can stretch the entire TinyMCE interface (by grabbing the draggable area in the bottom right of the editor interface).

This behavior is different than the autoresize plugin, which controls the resizing of the editable area only, not the entire editor.

Type: Number

Example: using max_width

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_width: 500
});
by default the resize handle does not allow horizontal dragging and giving this key a value will not result in an observable behavior.

Auto-resizing the editor

TinyMCE can be configured to automatically resize based on the editor content. For information on configuring the automatic resizing, see: The Autoresize plugin.