---
title: "Editor size and resize options"
description: "Options for setting the size of the editor and controling editor resizing"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/editor-size-options/"
md_url: "https://www.tiny.cloud/docs/tinymce/7/editor-size-options/index.md"
version: "7"
last_updated: "2025-04-09T03:20:42Z"
tokens: 1492
---
Important This page documents TinyMCE 7. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/editor-size-options/).
# Editor size and resize options

## Initial dimensions

### `height`

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

> **Note:**
> - 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`

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

### `width`

Set the width of the editor.

> **Note:** 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`

```js
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'`

> **Note:** 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](../tinymce-for-mobile/#mobile-defaults-for-selected-options).

#### Example: disabling editor resizing

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

#### Example: enabling vertical and horizontal editor resizing

```js
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`](../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`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  min_height: 200
});
```

> **Note:** If the [`resize`](#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`](../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`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_height: 500
});
```

> **Note:** If the [`resize`](#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).

> **Note:** This behavior is different from the [`autoresize`](../autoresize/) plugin, which controls the resizing of the editable area only, not the entire editor.
**Type:** `Number`

#### Example: using `min_width`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  min_width: 400
});
```

> **Note:** By default the [`resize`](#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).

> **Note:** This behavior is different than the [`autoresize`](../autoresize/) plugin, which controls the resizing of the editable area only, not the entire editor.
**Type:** `Number`

#### Example: using `max_width`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  max_width: 500
});
```

> **Note:** by default the [`resize`](#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](../autoresize/).