Editor Events

List of common editor events

Contribute to this page

Editor Events

Here is an example on how to bind a handler function to the click event.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('click', function (e) {
      console.log('Element clicked:', e.target.nodeName);
    });
  }
});
Event Native/Core/Plugin Description
Click native Fires when the editor is clicked.
DblClick native Fires when the editor is double clicked.
MouseDown native Fires when a mouse button is pressed down inside the editor.
MouseUp native Fires when a mouse button is released inside the editor.
MouseMove native Fires when the mouse is moved within the editor.
MouseOver native Fires when a new element is being hovered within the editor.
MouseOut native Fires when a element is no longer being hovered within the editor.
MouseEnter native Fires when mouse enters the editor.
MouseLeave native Fires when mouse leaves the editor.
KeyDown native Fires when a key is pressed within the the editor.
KeyPress native Fires when a key is pressed within the the editor.
KeyUp native Fires when a key is released within the the editor.
ContextMenu native Fires when the context menu is invoked within the editor.
Paste native Fires when a paste is done within within the the editor.
Init core Fires when the editor is initialized.
Focus core Fires when the editor is focused.
Blur core Fires when the editor is blurred.
BeforeSetContent core Fires before contents being set to the editor.
SetContent core Fires after contents been set to the editor.
GetContent core Fires after the contents been extracted from the editor.
PreProcess core Fires when the contents in the editor is being serialized.
PostProcess core Fires when the contents in the editor is being serialized.
NodeChange core Fires when selection inside the editor is changed.
Undo core Fires when the contents has been undo:ed to a previous state.
Redo core Fires when the contents has been redo:ed to a previous state.
Change core Fires when undo level is added to the editor.
Dirty core Fires when editor contents is being considered dirty.
Remove core Fires when the editor is removed.
ExecCommand core Fires after a command has been executed.
PastePreProcess paste Fires when contents gets pasted into the editor.
PastePostProcess paste Fires when contents gets pasted into the editor.

Native means that it's just a wrapped native browser event. Core means that it's a core specific event provided by the editor.

Init

Here is an example where init events are listened to notice that we bind this on setup.

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

Focus

Gets fired when the editor is focused.

Here is an example off how to listen for focus events.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('focus', function (e) {
      console.log('Editor got focus!');
    });
  }
});

Blur

Gets fired when the editor is blurred but not when focus is moved to any of the editors UI components.

Here is an example off how to listen for blur events.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('blur', function (e) {
      console.log('Editor was blurred!');
    });
  }
});

BeforeSetContent

Gets fired before contents being inserted into the editor.

Parameters

Here is an example on how alter the contents before it's being inserted into the editor.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('BeforeSetContent', function (e) {
      e.content += 'My custom content!';
    });
  }
});

SetContent

Gets fired after contents been inserted into the editor.

Parameters

Here is an example on log the content that got inserted into the editor.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('SetContent', function (e) {
      console.log(e.content);
    });
  }
});

GetContent

This event gets fired when contents is being extracted from the editor.

Parameters

Here is an example on how alter the contents before it's being extracted from the editor.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('GetContent', function (e) {
      e.content += 'My custom content!';
    });
  }
});

PreProcess

This event gets fired when the contents inside the editor is being serialized to a HTML string.

Parameters

Here is an example on how alter the contents before it's being extracted from the editor.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('PreProcess', function (e) {
      console.log(e.node);
    });
  }
});

PostProcess

This event gets fired when the contents inside the editor is being serialized to a HTML string.

Parameters

Here is an example on how alter the contents when it's being extracted from the editor.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('PostProcess', function (e) {
      e.content += 'My custom content!';
    });
  }
});

NodeChange

This event gets fired when the selection inside the editor is changed.

Parameters

Here is an example on how to bind the NodeChange event. This event is fired when selection changes within the editor.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('NodeChange', function (e) {
      console.log('Node changed');
    });
  }
});

Undo

This event gets fired when undo is made by the user.

Parameters

Here is an example on how to bind the Undo event.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('Undo', function (e) {
      console.log('User has pressed undo');
    });
  }
});

Redo

This event gets fired when redo is made by the user.

Parameters

Here is an example on how to bind the Redo event.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('Redo', function (e) {
      console.log('User has pressed redo');
    });
  }
});

Change

This event gets fired when changes are made inside the editor that cause an undo level to be added.

Here is an example on how listen for editor changes.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('Change', function (e) {
      console.log('Editor contents was changed.');
    });
  }
});

Dirty

This event gets fired when the editor is considered dirty. This state can be toggled of using: editor.setDirty(false).

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('Dirty', function (e) {
      console.log('Editor is dirty!');
    });
  }
});

Remove

This event gets fired when the editor is removed from a textarea/div.

Here is an example on how alter the contents before it's being extracted from the editor.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('GetContent', function (e) {
      e.content += 'My custom content!';
    });
  }
});

ExecCommand

This even is fired when a command like Bold/Italic etc is made by the editor.

Parameters

Here is an example on how alter the contents before it's being extracted from the editor.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('GetContent', function (e) {
      e.content += 'My custom content!';
    });
  }
});

PastePreProcess

This event is fired when contents from the clipboard is being processed by the paste process.

Parameters

Here is an example on how alter the contents being pasted into the editor.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('PastePreProcess', function (e) {
      e.content += 'My custom content!';
    });
  }
});

PastePostProcess

This event is fired when contents from the clipboard is being processed by the paste process.

Parameters

Here is an example on how log the node being pasted.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('PastePostProcess', function (e) {
      console.log(e.node);
    });
  }
});
``

## Editor Manager Events

Here is an example on how to bind a handler function to the click event.

```js
tinymce.on('AddEditor', function (e) {
  console.log('An editor was added with id: ' + e.editor.id);
});
Event Description
AddEditor Fires when a new editor instance is added.
RemoveEditor Fires when a editor instance is removed.

AddEditor

This event gets fired when editor instances gets created and added to the EditorManager collection.

Parameters

Here is an example on how to listen for editor instances being created.

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

RemoveEditor

This event gets fired when editor instances are removed from the target textarea/div.

Parameters

Here is an example on how to listen for editor instances being removed.

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.