diosney diosney - 1 month ago 39
Javascript Question

TinyMCE: How bind on event after its initialized

I already searched a lot but by google-fu'ing don't get me any results :(

I have an already initialized

tinyMCE
editor which initialization process I cannot control, so code like the following don't work at all:

tinyMCE.init({
...
setup : function(ed) {
ed.onChange.add(function(ed, l) {
console.debug('Editor contents was modified. Contents: ' + l.content);
});
}
});


Code like the following doesn't work either since the jQuery tinymce plugin isn't defined:

$('textarea').tinymce({
setup: function(ed) {
ed.onClick.add(function(ed, e) {
alert('Editor was clicked: ' + e.target.nodeName);
});
}
});


I mean, it has to be using the
tinymce.something
syntax.

How can I bind a callback function to whatever tinyMCE event after tinyMCE is already initialized?

Answer

After hacking into the tinymce object with console.log(), I found a working solution:

setTimeout(function () {
       for (var i = 0; i < tinymce.editors.length; i++) {
             tinymce.editors[i].onChange.add(function (ed, e) {
             // Update HTML view textarea (that is the one used to send the data to server).
         ed.save();
       });
            }
}, 1000);

Inside that callback function one can set the whatever event binding one wants.

The setTimeout call is to overcome the racing condition of tinymce and jQuery, since when the call to tinymce.editors[i].onChange.add() is made tinymce wasn't initialized yet.