Getting the tinyMCE editor instance on button click

Question

Edit: Added a fiddle example- http://fiddle.tinymce.com/EZbaab/2

I currently have a page with a tinyMCE instance on it and three separate textareas that inherit it.

I have a custom menu that has clickable sub-menu items on it (generated using Django), that when clicked, insert content into the currently active tinyMCE editor (textarea). The trouble is, this happens regardless of WHICH editor toolbar was clicked. So for example if I click the top editor's toolbar item, but have the bottom editor focused, the text gets pasted into the bottom editor.

I need to either force the editor that has it's toolbar clicked to become focused when a menu item is clicked (which happens for the default buttons like bold, italic, underline, but not for my custom menu items)

or I need to pass the instance id of the editor that was clicked into the function that pastes in the text somehow. The difficulty is I'm struggling to find any reference to these two tasks in the documentation.

The tinyMCE init code:

tinyMCE.init({
    forced_root_block : false,
    force_br_newlines : true,
    force_p_newlines : false,
    mode : "textareas",
    theme : "advanced",
    plugins : "contextmenu,paste,save,-stdpara",
    theme_advanced_buttons1 : ",bold,italic,underline,cleanup,|,undo,redo,|,cut,copy,paste,|,stdpara",
    theme_advanced_buttons2 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    force_br_newlines : true,
    force_p_newlines : false,
    forced_root_block : '',
});    

(Where stdpara is my custom menu plugin):

The menu code (stripped out the django and just added some random data:

tinymce.create('tinymce.plugins.StandardParagraphPlugin', {
    createControl: function(n, cm) {
        switch (n) {
            case 'stdpara':
                var c = cm.createSplitButton('stdparagraph', {
                    title : 'Standard Paragraph',
                image : 'img/para.png',
                });

                c.onRenderMenu.add(function(c, m) {
                    m.add({title : 'Standard Paragraphs', 'class' : 'mceMenuItemTitle'}).setDisabled(1);
                    category_menu = m.addMenu({title : 'Some Title'});
                    category_menu.add({title : 'Some sub-title', onclick : function() { tinyMCE.activeEditor.execCommand('mceInsertContent',false,'The Text') }); 
                    }});
                return c;
            }
        return null;
    }
});

Answer 1

I need to either force the editor that has it's toolbar clicked to become focused when a menu item is clicked (which happens for the default buttons like bold, italic, underline, but not for my custom menu items)

This is correct, but the problem lies here

tinyMCE.activeEditor.execCommand('mceInsertContent',false,'The Text')

This will execute the command on the active Editor. tinyMCE.activeEditor gets reset when the user clicks into the editor for example.

It will be better to address the editor to which the drop-down belongs to. It is somewhat tricky and does not look very elegant, but as long as tinymce does not change the button logic and naming it will be proof for tinymce updates. See my tinymce fiddle here: http://fiddle.tinymce.com/IZbaab/1