Editor Events

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);
    });
  }
});

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

• content String - The HTML content that's being inserted into the editor.
• selection Boolean - True/False if the content was inserted at selection or replaced all contents.

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

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

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

• content String - The HTML content that's being extracted from the editor.

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

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

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

• content String - The HTML content that's been extracted from the editor.

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

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

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

• level Object - Undo level object containing contents.

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

• level Object - Undo level object containing contents.

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

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

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

• content String - The HTML content that's being pasted into the editor.

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

• node DOMElement - Node element being pasted.

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);
    });
  }
});

AddEditor

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

Parameters

• editor tinymce.Editor - Editor instance being added.

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

• editor tinymce.Editor - Editor instance being removed.

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.