Editor events

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

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

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