TinyMCE Save plugin: connect Save and Cancel to the right document state

Add save to TinyMCE's plugins and toolbar to expose its Save action. Without a custom callback, the plugin submits the containing form. Its Save button is disabled until content changes by default. Before exposing Cancel beside it, decide which editor save point the author is returning to and how that relates to the record your server actually accepted. Save plugin documentation

Consider a dispatch note that initially reads “Use entrance C.” An author changes C to D, saves, then experiments with “Use the loading ramp.” Cancel should have a clearly explained result. A reset inside the editor and a reversal of a server record are separate application operations.

Expose the controls in an existing form

For a current, already loaded TinyMCE installation, merge these options with the application's existing configuration:

tinymce.init({
  selector: '#dispatch-note',
  plugins: 'save',
  toolbar: 'undo redo | save cancel',
  save_enablewhendirty: true
});

Keep the existing license configuration, other plugins, and form handling. The selector must identify the dispatch note inside its intended form. Default form submission needs a real application destination and method; adding this toolbar does not create them.

If the button initially appears disabled, edit the note before diagnosing a loading failure. save_enablewhendirty defaults to true. Setting it to false allows the action even when TinyMCE sees no content modification, which may suit a form where other fields can change independently.

Check those surrounding fields explicitly. A delivery-date input can change while the editor's text stays the same. An editor-only dirty indicator may then be the wrong condition for enabling the form's sole Save action. Keep a form-level control or integrate an appropriate application state policy.

Give Cancel a precise meaning

The plugin documents mceCancel as resetting to the last save point created through mceSave, the Save toolbar button, or the Save menu item. If no save point exists, it resets to the initial state. These commands target one initialized instance:

dispatchEditor.execCommand('mceSave');
// Later, after additional changes:
dispatchEditor.execCommand('mceCancel');

Here dispatchEditor refers to the dispatch note's editor. Treat the two lines as separate actions, not a handler that immediately saves and cancels. Use the toolbar's actual behavior to explain the result to authors.

For the entrance fixture, check Cancel before any Save, then again after saving D and changing the text to “loading ramp.” Record what the editor restores in each case. Do this in a development form where submitting cannot alter a real dispatch instruction.

An editor save point is not proof that the server committed the same content. If the request fails, preserve the draft and show the failure. Do not describe Cancel as “restore the last server version” unless the application's own reload logic establishes that behavior.

Choose a custom callback deliberately

save_onsavecallback lets an application provide a function for the Save button or command. save_oncancelcallback similarly provides its Cancel callback. Use those integration points when your application needs its own workflow, and follow the plugin behavior for the installed release.

A console message saying “Saved” establishes only that a callback ran. Your handler still needs to identify the record, capture the intended content, send it through the real save route, and report the actual response. Avoid silently combining a callback-based request with another native form submission.

The TinyMCE HTML capture guide covers getContent(), backing-textarea synchronization, and payload timing. Resolve those value-capture questions separately from the Save/Cancel control policy.

If the plugin reports “Form submit field collision,” inspect form controls named submit. TinyMCE documents that name as conflicting with the form's JavaScript submission method; use a different control name such as submitbtn.

Reopen the dispatch instruction after saving

Test one successful request and one rejected request. For success, reload the saved record independently and confirm entrance D alongside the correct delivery date. For failure, confirm the edited instruction remains recoverable and the page does not announce success.

Browser draft recovery has a different role: TinyMCE Autosave can retain a local recovery copy. Give each control language that matches its result, so the dispatcher knows whether a change is still a draft or is now the saved instruction.

Keep reading