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
new FroalaEditor('textarea', {
events: {
click: function (e) {
console.log('Element clicked:', e.target.nodeName);
}
}
});
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
new FroalaEditor('textarea', {
events: {
'commands.after', function (cmd, param1, param2) {
if (cmd === 'paragraphFormat' && param1 === 'H1') {
console.log('paragraphFormat was executed');
}
}
}
});