2

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.

2

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
} );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.