Add Item to Custom TinyMCE Menu

Question

I've created a custom menu which appears on my TinyMCE toolbar but would like to add another item to that menu in a separate function elsewhere in my plugin (depending on whether some other functionality is active). I had hoped that addMenuItem might do the trick but I can't make it happen. I suspect that it could have to do with my getting the 'context' wrong. Can anyone tell me if this is even possible?

Here's the function that adds my custom menu:

(function() {
    tinymce.PluginManager.add('nto_shortcode_button1', function( editor, url ) {
        editor.addButton( 'nto_shortcode_button1', {
            title: 'addShortcode',
            text: '[shortcode]',
            type: 'menubutton',
            icon: 'wp_code',
            menu: [
                {
                    text: 'Issues',
                    value: '[issues]',
                    onclick: function() {
                        editor.insertContent(this.value());
                    }
                },
                {
                    text: 'Testimonials',
                    value: '[testimonials id="int" limit="int" per_row="int" orderby="string" order="string" category="int" excerpt="bool" content="bool"]',
                    onclick: function() {
                        editor.insertContent(this.value());
                    }
                },
                {
                    text: 'Button',
                    value: '[button link="string" target="_blank"]Button Text Here[/button]',
                    onclick: function() {
                        editor.windowManager.open( {
                            title: 'Insert [button] shortcode',
                            body: [{
                                type: 'textbox',
                                name: 'text',
                                label: 'Your button text'
                            },
                            {
                                type: 'textbox',
                                name: 'destination',
                                text: 'http://',
                                label: 'Destination URL'
                            },
                            {
                                type: 'checkbox',
                                name: 'target',
                                checked: false,
                                text: 'Open in new window or tab?'
                            }],
                            onsubmit: function( e ) {
                                if( e.data.target == true ) {
                                    editor.insertContent( '[button target="_blank" link="http://' + e.data.destination + '"]' + e.data.text + '[/button]');
                                } else {
                                    editor.insertContent( '[button link="http://' + e.data.destination + '"]' + e.data.text + '[/button]');
                                }

                            }
                        });
                    }
                }
            ]
        });
    });
})();

... and here's the one that I had hoped would later pop an additional item on that menu:

(function() {
    tinymce.PluginManager.add('features_shortcode_button', function(editor, url) {
        editor.addMenuItem('features_shortcode_button', {
            text: 'Tooltip',
            icon: false,
            context: 'nto_shortcode_button1',
            onclick: function() {
                editor.insertContent('Hello World!');
            }
        });
    });
})();

Q: Is it possible to push an item into this menu outside of the original function? Am I right in citing the 'context' as 'nto_shortcode_button1'. Can/should I be declaring a context attribute for my original custom menu? Thanks.

Answer 1

addMenuItem() adds to tinymce's toolbar, which isn't used by WP by default, and uses context to add to the particular (sub)menu. You're adding a MenuButton, and you can access the button through the editor's buttons array, keyed by the button name:

add_action( 'admin_print_footer_scripts', function () {
    ?>
    <script type="text/javascript">
    jQuery(function ($) {
        tinymce.on('SetupEditor', function (editor) {
            if (editor.id === 'content') {
                editor.on('init', function () {
                    var button = this.buttons['nto_shortcode_button1'];
                    if (button) {
                        button.menu.push({
                            text: 'Tooltip',
                            icon: 'wp_help',
                            onclick: function() {
                                editor.insertContent('Hello World!');
                            }
                        });
                    }
                });
            }
        });
    });
    </script>
    <?php
} );