Migrate from TinyMCE

Events

This guide provides a side by side comparison of using the Froala Editor events next to TinyMCE ones. For a full list of events, please check the Events page from the docs.

1. Click event

When customizing a WYSIWYG HTML Editor, one of the most common used events is the click event inside the editable area.

TinyMCE Code Example

tinymce.init({
  selector: 'textarea',
  init_instance_callback: function (editor) {
    editor.on('click', function (e) {
      console.log('Element clicked:', e.target.nodeName);
    });
  }
});

Froala Code Example

$('textarea').on('froalaEditor.click', function (e, editor, clickEvent) {
  console.log('Element clicked:', e.target.nodeName);
})
.froalaEditor();

2. Intercepting a button click

The next example highlights how to intercept the format change of a paragraph.

TinyMCE Code Example

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

Froala Code Example

$('textarea').on('froalaEditor.commands.after', function (e, editor, cmd, param1, param2) {
  if (cmd === 'paragraphFormat' && param1 === 'H1') {
    console.log('paragraphFormat was executed');
  }
})
.froalaEditor();