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 initiali

Answer 1

Here is my solution for binding events to one or multiple textareas at any time, given this code is appended after including the tinymce javascript file into your page. (In other words, the only thing required for this to work, is the existence of the 'tinymce' variable)

// Loop already initialised editors
for(id in tinymce.editors){
    if(id.trim()){
        elementReady(id);
    }
}

// Wait for non-initialised editors to initialise
tinymce.on('AddEditor', function (e) {
    elementReady(e.editor.id);
});

// function to call when tinymce-editor has initialised
function elementReady(editor_id){

    // get tinymce editor based on instance-id
    var _editor = tinymce.editors[editor_id];

    // bind the following event(s)
    _editor.on("change", function(e){

        // execute code
    });
}

Note that the 'change' event is not bound to always trigger instantly after something changed. According to the documentation, it “gets fired when changes are made inside the editor that cause an undo level to be added.” Which in my experience, does not always happen when you expect it to happen.

One way to overcome this is by binding multiple events, such as 'input change', however, there will be some overlapping, which should then be filtered.