---
title: "Save plugin"
description: "Adds a save button to the TinyMCE toolbar."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/save/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/save/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 833
---
# Save plugin

This plugin adds a save button to the TinyMCE toolbar, which will submit the form that the editor is within.

## Basic setup

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

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).

## Save error messages

The `"Error: Form submit field collision."` error message will appear if you call the submit button of your form "submit", which causes a collision with the JS form `submit` function and makes it impossible to submit the form using code. This can easily be avoided by naming the submit button `"submitbtn"` or similar.

So replace this:

```html
<form><button name="submit"></button></form>
```
With this:

```html
<form><button name="submitbtn"></button></form>
```

## Options

These settings affect the execution of the `save` plugin. Callbacks that will execute after saving the content or canceling saving the content are included in this section. In addition, a setting that will disable the save button when no modifications have been made to the content is available here.

### `save_enablewhendirty`

This option allows you to disable the save button until modifications have been made to the content of the editor. This option is enabled by default.

**Type:** `Boolean`

**Default value:** `true`

**Possible values:** `true`, `false`

#### Example: using `save_enablewhendirty`

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

### `save_oncancelcallback`

This option allows you to specify the function that will be executed when the cancel button/command is invoked.

**Type:** `Function`

#### Example: using `save_oncancelcallback`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'save',
  toolbar: 'save',
  save_oncancelcallback: () => {
    console.log('Save canceled');
  }
});
```

### `save_onsavecallback`

This option allows you to specify the function that will be executed when the save button/command is invoked.

**Type:** `Function`

#### Example: using `save_onsavecallback`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'save',
  toolbar: 'save',
  save_onsavecallback: () => {
    console.log('Saved');
  }
});
```

## Toolbar buttons

The Save plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `cancel` | Cancels/Resets the editor contents to it’s initial state. |
| `save` | Saves the current editor contents to a form or ajax call. |
These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Commands

The Save plugin provides the following TinyMCE commands.

| Command | Description |
| --- | --- |
| mceCancel | Resets the editor content to the last save point created with `mceSave`, the *save* toolbar button, or the **Save** menu item. This command will reset the editor content to the initial state if no save points exist. |
| mceSave | Saves the current editor contents. |
Examples
```js
tinymce.activeEditor.execCommand('mceCancel');
tinymce.activeEditor.execCommand('mceSave');
```