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