Editor Events

List of common editor events

Contribute to this page

Editor Events

Here is an example of 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 the 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 an element is no longer being hovered within the editor.
MouseEnter native Fires when the mouse enters the editor.
MouseLeave native Fires when the mouse leaves the editor.
KeyDown native Fires when a key is pressed within the editor.
KeyPress native Fires when a key is pressed within the editor.
KeyUp native Fires when a key is released within the editor.
ContextMenu native Fires when the context menu is invoked within the editor.
Paste native Fires when a paste is done within 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 the content is set to the editor.
SetContent core Fires after the content is set to the editor.
GetContent core Fires after the content is extracted from the editor.
PreProcess core Fires when the contents in the editor are being serialized.
PostProcess core Fires when the contents in the editor are being serialized.
NodeChange core Fires when selection inside the editor is changed.
Undo core Fires when the contents have been reverted to a previous state.
Redo core Fires to revert the effects of an Undo event.
Change core Fires when undo level is added to the editor.
Dirty core Fires when editor contents are 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 are pasted into the editor.
PastePostProcess paste Fires when contents are 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 of 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 the focus is moved to any of the editors UI components.

Here is an example of 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 the contents are inserted into the editor.

Parameters

Here is an example of how to alter the contents before inserting 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 the content has been inserted into the editor.

Parameters

Here is an example of the content logged to the console in response to the SetContent event.

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

GetContent

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

Parameters

Here is an example of how to alter the contents before extracting it 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 are being serialized to an HTML string.

Parameters

Here is an example of how to alter the contents before extracting it 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 have been serialized to an HTML string.

Parameters

Here is an example of how to 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 of 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 a request to undo is made by the user.

Parameters

Here is an example of 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 a request to redo is made by the user.

Parameters

Here is an example of 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 of how to 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 by 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 of how to detect when editor.remove() was called.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('Remove', function (e) {
      console.log('The editor has been removed');
    });
  }
});

ExecCommand

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

Parameters

Here is an example of how to detect when the bold feature was executed.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('ExecCommand', function (e) {
      if (e.command === 'mceToggleFormat' && e.value === 'bold') {
        console.log('Bold was executed')
      }
    });
  }
});

PastePreProcess

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

Parameters

Here is an example of how to detect when a paste operation is about to begin and how to modify the contents

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('PastePreProcess', function (e) {
      e.content = e.content + ' foo';
      console.log('The modified pasted content was: ', e.content);
    });
  }
});

PastePostProcess

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

Parameters

Here is an example of how to log the node being pasted.

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('PastePostProcess', function (e) {
      console.log(e.node);
    });
  }
});
Event Description
AddEditor Fires when a new editor instance is added.
RemoveEditor Fires when an editor instance is removed.

AddEditor

This event is fired when an editor instance is created and added to the EditorManager collection.

Parameters

Here is an example of 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 of 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.