- Documentation
- Concepts
- Custom Elements
- Save
- File
- Image
- Video
- Embedly Plugin
- Migration Guides
- From TinyMCE
- From V1
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();