wake-up-neo.net

Element zum benutzerdefinierten TinyMCE-Menü hinzufügen

Ich habe ein benutzerdefiniertes Menü erstellt, das auf meiner TinyMCE-Symbolleiste angezeigt wird, möchte diesem Menü jedoch an einer anderen Stelle in meinem Plug-in ein anderes Element hinzufügen (abhängig davon, ob eine andere Funktion aktiv ist). Ich hatte gehofft, dass addMenuItem den Trick macht, aber ich kann es nicht schaffen. Ich vermute, dass es damit zu tun haben könnte, dass ich den „Kontext“ falsch verstanden habe. Kann mir jemand sagen, ob das überhaupt möglich ist?

Hier ist die Funktion, die mein benutzerdefiniertes Menü hinzufügt:

(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]');
                                }

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

... und hier ist der, von dem ich gehofft hatte, dass er später einen zusätzlichen Eintrag in dieses Menü bringt:

(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!');
            }
        });
    });
})();

F: Ist es möglich, einen Eintrag außerhalb der ursprünglichen Funktion in dieses Menü zu verschieben? Habe ich recht, wenn ich den "Kontext" als "nto_shortcode_button1" zitiere? Kann/sollte ich ein Kontextattribut für mein ursprüngliches benutzerdefiniertes Menü deklarieren? Vielen Dank.

2
Kevin Nugent

addMenuItem() fügt die Symbolleiste von tinymce hinzu, die standardmäßig nicht von WP verwendet wird, und verwendet context, um dem jeweiligen (Unter-) Menü etwas hinzuzufügen. Sie fügen eine MenuButton hinzu und können auf die Schaltfläche über das buttons-Array des Editors zugreifen, das durch den Schaltflächennamen gekennzeichnet ist:

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