Events Available for TinyMCE

TinyMCE supports some browser-native events, and provides additional events for working with the editor and plugins.

Handling Editor events

The following examples illustrate how to use supported native events, editor core events, and plugin events with TinyMCE.

The following example uses a function to create a console log entry when the editor has initialized. This is also an example of handling an event which does not return any data.

tinymce.init({
  selector: 'textarea',
  setup: function(editor) {
    editor.on('init', function(e) {
      console.log('The Editor has initialized.');
    });
  }
});

The following example uses a function to create a console log entry when a command is executed in the editor. This is also an example of handling an event that returns data.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function(editor) {
    editor.on('ExecCommand', function(e) {
      console.log('The ' + e.command + ' command was fired.');
    });
  }
});

Supported browser-native events

TinyMCE supports the following browser-native events. Click the event name for details (links open MDN Web Docs).

Editor core events

The following events are provided by the TinyMCE editor.

Name Data Description

activate

{ relatedTarget: Editor }

Fired when the editor is activated.

deactivate

{ relatedTarget: Editor }

Fired when the editor is deactivated.

remove

N/A

Fired before the editor is removed/destroyed.

detach

N/A

Fired after the remove event, before the editor container is detached from the DOM.

init

N/A

Fired when the editor is fully initialized.

ScrollIntoView

{ elm: HTMLElement, alignToTop: boolean }

Fired when an element is about to be scrolled into view.

AfterScrollIntoView

{ elm: HTMLElement, alignToTop: boolean }

Fired when an element has been scrolled into view. NOTE: This feature is only available for TinyMCE 5.2 and later.

ObjectResized

{ target: HTMLElement, width: number, height: number, origin: string }

Fired when an object (such as an image) has finished being resized.

ObjectResizeStart

{ target: HTMLElement, width: number, height: number, origin: string }

Fired when an object (such as an image) is about to be resized.

SwitchMode

{ mode: string }

Fired when the editor mode is changed. The available modes are "design" and "readonly". Additional modes can be registered using TinyMCE API 'tinymce.activeEditor.mode.register()'.

ScrollWindow

(Same data as the native scroll event)

Fired when the window has scrolled.

ResizeWindow

(Same data as the native resize event)

Fired when the window is resized.

BeforeExecCommand

{ command: string, ui?: boolean, value?: any }

Fired before a command is executed.

ExecCommand

{ command: string, ui?: boolean, value?: any }

Fired after a command has executed.

NodeChange

{ element: Element, parents: Node[], selectionChange?: boolean }

Fired when the selected node inside the editor content has changed.

FormatApply

{ format: string; vars?: FormatVars; node?: Node | RangeLikeObject }

Fired after a format is applied. NOTE: This feature is only available for TinyMCE 5.9 and later.

FormatRemove

{ format: string; vars?: FormatVars; node?: Node | RangeLikeObject }

Fired after a format is removed. NOTE: This feature is only available for TinyMCE 5.9 and later.

ShowCaret

{ target: Node, direction: number, before: boolean }

Fired before a fake caret element is shown in the editor. The fake caret will appear where the cursor is normally not shown, such as at the start or end of tables and non-editable content.

SelectionChange

N/A

Fired when the content selection in the editor changes.

ObjectSelected

{ target: Node, targetClone?: Node }

Fired when an object (such as an image) is selected in the editor and the selection elements have rendered.

BeforeObjectSelected

{ target: Node, targetClone?: Node }

Fired when an object (such as an image) is selected in the editor, before it is rendered as selected.

GetSelectionRange

{ range: Range }

Fired when the selection range is being fetched from the editor.

SetSelectionRange

{ range: Range, forward: boolean }

Fired before the selection range is set in the editor.

AfterSetSelectionRange

{ range: Range, forward: boolean }

Fired after the selection range is set in the editor.

BeforeGetContent

{ format: string, source_view?: boolean, selection?: boolean, save?: boolean }

Fired before the content is serialized from the editor.

GetContent

{ content: string, format: string, source_view?: boolean, selection?: boolean, save?: boolean }

Fired after the content is serialized from the editor.

BeforeSetContent

{ content: string, format?: string, paste?: boolean, selection?: boolean }

Fired before the content is parsed and rendered in the editor.

SetContent

{ content: string, format?: string, paste?: boolean, selection?: boolean }

Fired after the content is parsed and rendered in the editor.

LoadContent

N/A

Fired after the initial content has loaded into the editor.

PreviewFormats

N/A

Fired before a formats CSS is generated when the format is being previewed in the editor.

AfterPreviewFormats

N/A

Fired after a formats CSS is generated when the format is being previewed in the editor.

ScriptsLoaded

N/A

Fired when all the scripts required for the editor to run (such as plugins and theme) have loaded.

PreInit

N/A

Fired after loading the editor and before starting to load the editor content.

PostRender

N/A

Fired after the theme has rendered.

NewBlock

{ newBlock: Element }

Fired when a new block is created in the editor, such as when the user presses the enter key.

ClearUndos

N/A

Fired when the undo levels have been cleared.

TypingUndo

N/A

Fired when a new undo level is created by typing content into the editor.

Change

{ level: UndoLevel }

Fired when the editor content changes have been committed, such as when moving focus away from the editor.

Redo

{ level: UndoLevel }

Fired when a change is been re-applied.

Undo

{ level: UndoLevel }

Fired when a change has been undone.

BeforeAddUndo

{ level: UndoLevel, lastLevel: UndoLevel, originalEvent: Event }

Fired before a new undo level is created.

AddUndo

{ level: UndoLevel, lastLevel: UndoLevel, originalEvent: Event }

Fired after a new undo level has been created.

Dirty

N/A

Fired when the editor transitions from a "pristine" state to a "dirty" state. The editor is "dirty" when an undo level has been created since initialization or the last saved state. To check if the editor is "dirty", use the editor.isDirty API.

CloseWindow

{ dialog: DialogApi }

Fired when a dialog has been closed.

OpenWindow

{ dialog: DialogApi }

Fired when a dialog has been opened.

ProgressState

{ state: boolean, time?: number }

Fired when a change to the editor progress state is scheduled using the TinyMCE API tinymce.activeEditor.setProgressState().

AfterProgressState

{ state: boolean }

Fired after the editor progress state is changed, and the new progress state is in effect.
NOTE: This feature is only available for TinyMCE 5.7 and later.

PreProcess

{ node: Element, format: string }

Fired before serializing a DOM node to HTML content.

PostProcess

{ node: Element, format: string }

Fired after serializing a DOM node to HTML content.

SetAttrib

{ attrElm: Element, attrName: string, attrValue: string }

Fired when an attribute is updated using the editor DOMUtils API.

ResizeEditor

N/A

Fired when the editor is resized, either by the resize handles or the auto-resize plugin. As of TinyMCE 5.10.6, this event is also fired when fullscreen mode is toggled. Toggling fullscreen mode requires the fullscreen plugin to be enabled.

SkinLoaded

N/A

Fired when the editor skin has been loaded.

SkinLoadError

{ message: string }

Fired when the editor skin fails to load. NOTE: This feature is only available for TinyMCE 5.2 and later.

PluginLoadError

{ message: string }

Fired when an editor plugin fails to load. NOTE: This feature is only available for TinyMCE 5.2 and later.

IconsLoadError

{ message: string }

Fired when the editor icon pack fails to load. NOTE: This feature is only available for TinyMCE 5.2 and later.

LanguageLoadError

{ message: string }

Fired when the editor language pack fails to load. NOTE: This feature is only available for TinyMCE 5.2 and later.

BeforeRenderUI

N/A

Fired before the theme UI is rendered.

ToggleSidebar

N/A

Fired when a sidebar is toggled opened/closed.

longpress

(Same data as the native touchstart event)

Fired when a long press occurs on a touch device inside the editor.
NOTE: This feature is only available for TinyMCE 5.1 and later.

tap

(Same data as the native touchend event)

Fired when a tap occurs on a touch device inside the editor (simulated event similar to click).
NOTE: This feature is only available for TinyMCE 5.1 and later.

ScrollContent

(Same data as the native scroll event)

(iframe mode only) Fired when the content inside an iframe window has been scrolled.

ResizeContent

(Same data as the native resize event)

(iframe mode only) Fired when the iframe window is resized.

Load

N/A

(iframe mode only) Fired when the editor iframe content has finished loading.

ResolveName

{ name: string, target: Element }

(iframe mode only) Fired when the editor tries to resolve the name of an element to render the status bar path.

BeforeOpenNotification

{ notification: NotificationSpec }

Fired before a notification is displayed. For information on the Notifications Specification (NotificationSpec), see: Create custom notifications. NOTE: This feature is only available for TinyMCE 5.6 and later.

OpenNotification

{ notification: NotificationApi }

Fired after a notification is displayed. For information on the Notifications API (NotificationApi), see: Create custom notifications. NOTE: This feature is only available for TinyMCE 5.6 and later.

Plugin events

The following plugins provide events.

Advanced Tables events

For events applicable to the Advanced Tables plugin, see: Table events.

Autosave events

The following events are provided by the Autosave plugin.

Name Data Description

RestoreDraft

N/A

Fired when a draft has been restored.

StoreDraft

N/A

Fired when a draft is saved.

RemoveDraft

N/A

Fired when a draft has been removed from memory.

Character Map events

The following event is provided by the Character Map plugin.

Name Data Description

InsertCustomChar

{ chr: string }

Fired before a special character is inserted into the editor.

Comments events

The following event is provided by the Comments plugin.

Name Data Description

mce-tinycomments-update

N/A

Fired when the comments sidebar is opened or closed.

Export events

The following event are provided by the Export plugin.

Name Data Description

ExportPdf

N/A

Fired when the editor content is about to be exported as a PDF.

Format Painter events

The following event is provided by the Format Painter plugin.

Name Data Description

FormatPainterToggle

{ state: boolean }

Fired when the format painter state changes.

Fullscreen events

The following event is provided by the Fullscreen plugin.

Name Data Description

FullscreenStateChanged

{ state: boolean }

Fired when the fullscreen state changes.

Import CSS events

The following event is provided by the Import CSS plugin.

Name Data Description

AddStyleModifications

{ items: StyleItem[], replace: boolean }

Fired during editor initialization when the style modifications are parsed from the CSS.

Link checker events

The following event is provided by the Link Checker plugin.

Name Data Description

LinkCheckerError

{ message: string }

Fired when a link checker error occurs, such as the Link Checker service can’t be reached.

Lists events

The following event is provided by the Lists plugin.

Name Data Description

ListMutation

{ action: string, element: Element }

Fired when a list is toggled on/off.

Media Embed events

The following event is provided by the Media Embed plugin.

Name Data Description

MediaEmbedError

{ message: string }

Fired when a media embed error occurs, such as the Media Embed service can’t be reached.

Paste events

The following events are provided by the Paste plugin.

Name Data Description

PastePreProcess

{ content: string, wordContent: boolean }

Fired before the content is parsed from the clipboard.

PastePostProcess

{ node: Element, wordContent: boolean }

Fired after the content has been parsed from the clipboard, but before it’s added to the editor.

PastePlainTextToggle

{ state: boolean }

Fired when the plain text paste mode state changes.

Permanent Pen events

The following events are provided by the Permanent Pen plugin.

Name Data Description

PermanentPenToggle

{ state: boolean }

Fired when the permanent pen state changes.

PermanentPenProperties

{ fontname: string, fontcolor: string, fontsize: string, hilitecolor: string, bold: boolean, italic: boolean, underline: boolean, strikethrough: boolean }

Fired when the permanent pen properties are changed.

PowerPaste events

The following events are provided by the PowerPaste plugin.

Name Data Description

PastePreProcess

{ content: string, mode: string, source: string }

Fired before the content is parsed from the clipboard.

PastePostProcess

{ node: Element, mode: string, source: string }

Fired after the content has been parsed from the clipboard, but before it’s added to the editor.

PastePlainTextToggle

{ state: boolean }

Fired when the plain text paste mode state changes.

Spell Checker events

The following events are provided by the Spell Checker plugin.

The free TinyMCE Spell Checker plugin (spellchecker) was deprecated with the release of TinyMCE 5.4. For details, see the free TinyMCE Spell Checker plugin deprecation notice. The free Spell Checker plugin will be removed in TinyMCE 6.0.
Name Data Description

SpellcheckStart

N/A

Fired when spellchecking is enabled.

SpellcheckEnd

N/A

Fired when spellchecking is disabled.

Spell Checker Pro events

The following events are provided by the Spell Checker Pro plugin.

Name Data Description

SpellcheckerIgnore

{ word: string }

Fired when a single instance of a word has been marked as ignored.

SpellcheckerIgnoreAll

{ word: string, language: string }

Fired when all instances of a word (in a certain language) have been marked as ignored.

The language property is available for TinyMCE 5.10 and later.

SpellcheckError

{ message: string }

Fired when a spellchecker error occurs, such as when the Spell Checker Pro service can’t be reached.

SpellcheckStart

N/A

Fired when spellchecking is enabled.

SpellcheckEnd

N/A

Fired when spellchecking is disabled.

SpellcheckerLanguageChanged

{ language: string, prevLanguage: string }

Fired when the spellchecking language is changed.
NOTE: This feature is only available for TinyMCE 5.7 and later.

Table events

The following events are provided by the Table plugin.

Name Data Description

newrow

N/A

Fired when a row is created

newcell

N/A

Fired when a cell is created

ObjectResizeStart

N/A

Fired when a resize action is started on a table, row, column or cell using the resize bars

ObjectResized

N/A

Fired when a resize action is finished on a table, row, column or cell using the resize bars

TableModified

{ table: HTMLTableElement, structure: boolean, style: boolean }

Fired when style or structural changes are made to a table.
NOTE: This feature is only available for TinyMCE 5.7 and later.

TableSelectionClear

N/A

Fired when the table selection is cleared.
NOTE: This feature is only available for TinyMCE 5.1 and later.

Visual Blocks events

The following event is provided by the Visual Blocks plugin.

Name Data Description

VisualBlocks

{ state: boolean }

Fired when the Visual Blocks state changes.

Visual Characters events

The following event is provided by the Visual Characters plugin.

Name Data Description

VisualChars

{ state: boolean }

Fired when the Visual Characters state changes.

Word Count events

The following event is provided by the Word Count plugin.

Name Data Description

WordCountUpdate

{ wordCount: { words: number, characters: number, charactersWithoutSpaces: number } }

Fired when the editor word count is updated.

Editor Manager events

The following events are used for editor management. These events are handled using tinymce.on, rather than editor.on or editor.fire, as shown in Examples: Handling Editor Manager events.

Name Data Description

AddEditor

{ editor: Editor}

Fired when a new editor is created.

RemoveEditor

{ editor: Editor}

Fired when an editor is removed/destroyed.

BeforeUnload

N/A

Fired before the browser window is closed (same as native beforeunload event).

Examples: Handling Editor Manager events

AddEditor

tinymce.on('AddEditor', function(e) {
  console.log('Added editor with id: ' + e.editor.id);
});

RemoveEditor

tinymce.on('RemoveEditor', function(e) {
  console.log('Removed editor with id: ' + e.editor.id);
});