Events Available for TinyMCE

Handling Editor events

TinyMCE supports several types of events for working with the editor and plugins.

The following examples illustrate how to use supported native events, editor core events, and plugin events with TinyMCE. Editor Manager events are handled separately using tinymce.on, rather than editor.on.

Defining an event handler

Event handlers can be initialized anywhere using the editor.on method, as shown in the following example:

tinymce.activeEditor.on('click', (e) => {
  console.log('Editor was clicked at: ' + e.pageX + ', ' + e.pageY);
});

setup and init_instance_callback options

A common use case for setting up events is to use the setup and init_instance_callback options. These options allow you to bind events before and after the editor instance is initialized.

The setup option can be used to bind an event before the editor instance is initialized.

The init_instance_callback option can be used to bind an event after the editor instance is initialized.

The init_instance_callback is functionally equivalent to binding an event listener to the init event on the setup option.

For example, the following code:

tinymce.init({
  selector: 'textarea',
  setup: (editor) => {
    editor.on('init', (e) => {
      console.log('Editor is initialized.');
    });
  }
});

Is equivalent to:

tinymce.init({
  selector: 'textarea',
  init_instance_callback: (editor) => {
    console.log('Editor is initialized.');
  }
});

For more information on these options, see setup and init_instance_callback.

Binding an event before editor initialization

The following example uses the setup option to bind an event before the editor instance is initialized. This is an example of handling an event that does not return data, such as the ResizeEditor editor event. Therefore, the e parameter is not used.

tinymce.init({
  selector: 'textarea',
  setup: (editor) => {
    editor.on('ResizeEditor', (e) => {
      console.log('Editor was resized.');
    });
  }
});

Binding an event after editor initialization

The following example uses the init_instance_callback option to bind an event after the editor instance is initialized. This is an example of handling an event that returns data, such as the ExecCommand event. Therefore, we can use the e parameter to access the data returned by the event.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: (editor) => {
    editor.on('ExecCommand', (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.

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.

FormatRemove

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

Fired after a format is removed.

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. NOTE: The content property has been deprecated and will be removed in the next major release.

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.

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. In TinyMCE 6.1 and later, 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.

ThemeLoadError

{ message: string }

Fired when the editor theme fails to load.

ModelLoadError

{ message: string }

Fired when the editor model fails to load.

PluginLoadError

{ message: string }

Fired when an editor plugin fails to load.

IconsLoadError

{ message: string }

Fired when the editor icon pack fails to load.

LanguageLoadError

{ message: string }

Fired when the editor language pack fails to load.

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.

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).

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.

OpenNotification

{ notification: NotificationApi }

Fired after a notification is displayed. For information on the Notifications API (NotificationApi), see: Create custom notifications.

PastePreProcess

{ content: string }

Fired before the content is parsed from the clipboard.

PastePostProcess

{ node: Element }

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.

AutocompleterStart

{ lookupData: AutocompleteLookupData[] }

Fired when an autocompleter is triggered and should show the fetched suggestions.

AutocompleterUpdate

{ lookupData: AutocompleteLookupData[] }

Fired when content is changed and the active autocompleter needs to update the suggestions shown.

AutocompleterEnd

N/A

Fired when the active autocompleter menu is about to be closed.

NewRow

N/A

Fired when a new table row is created.

NewCell

N/A

Fired when a new table cell is created.

TableModified

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

Fired when style or structural changes are made to a table.

TableSelectionClear

N/A

Fired when the table selection is cleared.

StylesTextUpdate

{ value: string }

Fired after the visible text label of the styles bespoke toolbar button is updated. value refers to the updated visible text label.

BlocksTextUpdate

{ value: string }

Fired after the visible text label of the blocks bespoke toolbar button is updated. value refers to the updated visible text label.

AlignTextUpdate

{ value: string }

Fired after the visible icon of the align bespoke toolbar button is updated. value refers to the updated visible icon.

FontSizeTextUpdate

{ value: string }

Fired after the visible text label of the fontsize bespoke toolbar button is updated. value refers to the updated visible text label.

FontSizeInputTextUpdate

{ value: string }

Fired after the visible text label of the fontsizeinput bespoke toolbar button is updated. value refers to the updated visible text label.

FontFamilyTextUpdate

{ value: string }

Fired after the visible text label of the fontfamily bespoke toolbar button is updated. value refers to the updated visible text label.

Plugin events

The following plugins provide 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 events are provided by the Tiny Comments plugin.

Name Data Description

mce-tinycomments-update

N/A

Fired when the comments sidebar is opened or closed.

CommentChange

{ getEventLog: () ⇒ EventLog[] }

Fired when a comment is added, resolved, deleted, edited, or replied to.

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.

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 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.

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 6.5 and later.

SpellcheckerUpdated

{ spelling: SpellingUpdate }

Fired when the editor content is checked for misspellings, and includes suggestions within the spelling object.

Spelling Autocorrect events

The following events are provided by the Spelling Autocorrect plugin.

Name Data Description

AutocorrectStart

N/A

Fired when autocorrect is turned on after being off.

AutocorrectEnd

N/A

Fired when autocorrect is turned off after being on.

CapitalizeStart

N/A

Fired when capitalization is turned on after being off.

CapitalizeEnd

N/A

Fired when capitalization is turned off after being on.

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', (e) => {
  console.log('Added editor with id: ' + e.editor.id);
});
RemoveEditor
tinymce.on('RemoveEditor', (e) => {
  console.log('Removed editor with id: ' + e.editor.id);
});