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 documentation.

1. Click event

This section compares the click event inside the editable area.

TinyMCE Code Example

Copy

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

Froala Code Example

Copy

new FroalaEditor('textarea', {
  events: {
    click: function (e) {
      console.log('Element clicked:', e.target.nodeName);
    }
  }
});

2. Intercepting a button click

This section shows how to intercept the format change of a paragraph.

TinyMCE Code Example

Copy

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

Copy

new FroalaEditor('textarea', {
  events: {
    'commands.after', function (cmd, param1, param2) {
      if (cmd === 'paragraphFormat' && param1 === 'H1') {
        console.log('paragraphFormat was executed');
      }
    }
  }
});