TinyMCE: How bind on event after its initialized

Question

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 1

Although this post is old now but I think other people will need this answer. I had the same problem and to fix it I did this:

tinyMCE.init({
        ...
        init_instance_callback : "myCustomInitInstance"
});

Based on http://www.tinymce.com/wiki.php/Configuration3x:init_instance_callback

Answer 2

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.