Editor events

List of common editor events

Contribute to this page

Editor Events

The following example uses a function to bind a handler 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

The following example binds a function to the init event. This event fires when the editor is first initialized.

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

Focus

This event fires when the editor is focused.

The following example listens for a focus event.

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

Blur

This event fires when the editor is blurred but not when the focus is moved to the editor’s UI components.

The following example listens for blur events.

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

BeforeSetContent

This event fires before content is inserted into the editor.

Parameters

  • content String - The HTML content inserted into the editor.
  • selection Boolean - True or False if the content was inserted at selection or replaced all content.

The following example alters the content 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

This event fires after content is inserted into the editor.

Parameters

  • content String - The HTML content inserted into the editor.
  • selection Boolean - True or False if the content was inserted at selection or replaced all content.

The following example uses the SetContent event.

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

GetContent

This event fires when content is extracted from the editor.

Parameters

  • content String - The HTML content extracted from the editor.

The following example uses the GetContent event.

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

PreProcess

This event fires when the content inside the editor is serialized to an HTML string.

Parameters

  • node DOMElement - A clone of the HTML element being serialized.

The following example uses the PreProcess event.

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

PostProcess

This event fires when the content inside the editor have been serialized to an HTML string.

Parameters

  • content String - The HTML content extracted from the editor.

The following example uses the PostProcess event.

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

NodeChange

This event fires when the selection inside the editor is changed.

Parameters

  • element DOMElement - HTML Element of selection.
  • parents [DOMElement] - Array with parents of the element.

The following example binds the NodeChange event.

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

Undo

This event fires when a request to undo is made.

Parameters

  • level Object - Undo level object containing content.

The following example binds 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 fires when a request to redo is made.

Parameters

  • level Object - Undo level object containing content.

The following example binds 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 fires when changes are made inside the editor that cause an undo level to be added.

The following example listens for editor changes using the Change event.

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

Dirty

This event fires when the editor is considered dirty. This state is 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 fires when the editor is removed from a textarea/div.

The following example detects when the editor.remove() event is 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 fires when a command like Bold/Italic etc is made by the editor.

Parameters

  • command String - The name of the command that was executed.

The following example detects the execution of the bold feature.

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 fires when content from the clipboard is processed by the paste process.

Parameters

  • content String - The HTML content pasted into the editor.

The following example detects the beginning of the paste event.

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 fires when content from the clipboard is processed by the paste operation.

Parameters

  • node DOMElement - Node element being pasted.

The following example logs the pasted node.

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 fires when an editor instance is created and added to the EditorManager collection.

Parameters

  • editor tinymce.Editor - Editor instance being added.

The following example listens for editor instances being created.

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

RemoveEditor

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

Parameters

  • editor tinymce.Editor - Editor instance being removed.

The following example listens 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.