This plugin adds a save button to the TinyMCE toolbar, which will submit the form that the editor is within.
Basic setup
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'save',
toolbar: 'save'
});
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:
<form><button name="submit"></button></form>
With this:
<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
Example: Using save_enablewhendirty
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'save',
toolbar: 'save',
save_enablewhendirty: true
});
save_oncancelcallback
This option allows you to specify the function that will be executed when the cancel button/command is invoked.
Type: String
Example: Using save_oncancelcallback
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'save',
toolbar: 'save',
save_oncancelcallback: function () { 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: String
Example: Using save_onsavecallback
tinymce.init({
selector: 'textarea', // change this value according to your HTML
plugins: 'save',
toolbar: 'save',
save_onsavecallback: function () { 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
configuration option. - The
quickbars_insert_toolbar
configuration option. - Custom Context toolbars.
Commands
The Save plugin provides the following JavaScript 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
tinymce.activeEditor.execCommand('mceCancel');
tinymce.activeEditor.execCommand('mceSave');
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.