Connect to an onExecCommand event using TinyMCE 4

Question

I am using TinyMCE 4, but the documentation is terrible. I am trying to provide a preview of the content in another div (outside the editor). Now I am listening to these events:

$(document).on('tinymce:changed tinymce:init', ...) 

This works when text is entered, but it does not start when commands are executed (for example, changing existing text to bold).

It looks like there is an onExecCommand event in TinyMCE 3.x that does what I want. But I can not find the documentation on how to listen to the global jQuery event, as I do, with change and init. Does anyone know what event he is shooting?

Answer 1

You can find the following example in the migration guide :

 // Old event editor.onInit(editor, args) { // Custom logic }); // New event editor.on('init', function(args) { // Custom logic }); 

So one problem is getting the correct event name and the correct editor instance :) The onExecCommand () event becomes "ExecCommand" in version 4.

Therefore, adding a handler when executing the command should be like this (make sure that the editors are already initialized when executing the code below):

 for (ed_id in tinymce.editors) { tinymce.editors[ed_id].on('ExecCommand', function(args) { alert(1); }); } 

For some reason, this event fires twice when the command is executed. I think you will overcome this problem.

Although this method does not use jQuery bindings, it works for me and may also solve your problem.

Answer 2

In case this helps anyone else, here is a list of all the events that tinymce 4 allows:

http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor