Tinymce 4.x extend plugin

Question

I'm looking for some examples on how to extend a existing tinymce (4.x) plugin, e.g. the "link" plugin.

The link plugin opens a dialog window... what I'd like to do is add an event when the dialog is opened and modify the body (insert some extra HTML with click events).

It seems to be problematic to do it nicely... I want to avoid some "on top" code like $('#mce_13').click(...); and rather use something like

editor.on('DialogOpen', function(e) {
    // if link dialog then
    $(e.body).append('<div>My HTML</div>');
});

However there are no such events like onDialogOpen... is there a best practice to achieve this?

Answer 1

I managed to do this for modal windows ( i needed callbacks for open/close ) maybe you could build on it to also detect what type of window is opened:

tinymce.init({
    //... code and setup here
    setup: function(editor) {
        editor.on('init',function(e) {
            setModalEvents(editor);
        });
    },
    //... and more here perhaps
});

and then the function itself:

// override modal methods to insert events
function setModalEvents(editor) {
    editor.windowManager.oldOpen = editor.windowManager.open;  // save for later
    editor.windowManager.open = function(t,r) {    // replace with our own function
        alert("modal window opened, insert callback here");
        var modal = this.oldOpen.apply(this, [t,r]);  // call original
        modal.on('close', function() {  // set event for close
            alert("modal window closed, insert callback here");
        });
        return modal; // Template plugin is dependent on this return value
    };
}

you could do similar overrides of other things in the tinymce core, so maybe this can be helpful.