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. If a string is provided, TinyMCE assumes the value is valid CSS and sets the editor’s height as the string value. This allows for alternate units such as %, em, and vh.

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

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