Important changes to Tiny Cloud pricing > Find out more

Editor events

List of common editor events

Contribute to this page

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 text color is changed 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('TextColorChange', function(e) {
      console.log('The text color of ' + e.name + ' is now:' + e.color);
    });
  }
});

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 } Fired when an object (such as an image) has finished being resized.
ObjectResizeStart { target: HTMLElement, width: number, height: number } 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.
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 commited, 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.
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 the editor progress state changes using the TinyMCE API tinymce.activeEditor.setProgressState().
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.
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.
TextColorChange { name: string, color: string } Fired when the text color is changed.
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.

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 event is provided by the Comments plugin.

Name Data Description
mce-tinycomments-update N/A Fired when a comment is updated.

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

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 } Fired when all instances of a word has been marked as ignored.
SpellcheckError { message: string } Fired when a spellchecker error occurs, such as 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.

Table events

The following event is provided by the Table plugin.

Name Data Description
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);
});

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.