Hook into onExecCommand event with TinyMCE 4

Question

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

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

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

It looks like in TinyMCE 3.x there is an onExecCommand event that does what I want. But I can't find any documentation on how to listen to the global jQuery event like I am doing with with change and init. Does anyone know what event it is firing?

Answer 1

In the migration guide you can find the following example:

// Old event
editor.onInit(editor, args) {
    // Custom logic
});

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

So the one problem is to get right event name and the right editor instance :) The onExecCommand() event becomes 'ExecCommand' in v4.

So adding a handler on command execution should be like this (be sure that editors are already initialized when executing 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 command is executed. I think you will overcome this issue.

Though this method does not uses jQuery bindings, it works for me and possibly will solve your problem too.

Answer 2

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

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