web-dev-qa-db-fra.com

Ajouter un élément au menu personnalisé TinyMCE

J'ai créé un menu personnalisé qui apparaît dans la barre d'outils TinyMCE, mais j'aimerais ajouter un autre élément à ce menu dans une fonction distincte située ailleurs dans mon plug-in (selon que d'autres fonctionnalités sont actives ou non). J'avais espéré que addMenuItem pourrait faire l'affaire mais je ne peux pas y arriver. Je soupçonne que cela pourrait être dû au fait que je me trompe de "contexte". Quelqu'un peut-il me dire si c'est même possible?

Voici la fonction qui ajoute mon menu personnalisé:

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

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

... et voici celui que j'avais espéré faire apparaître plus tard un élément supplémentaire dans ce 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: Est-il possible d'insérer un élément dans ce menu en dehors de la fonction d'origine? Ai-je raison de citer le "contexte" comme "nto_shortcode_button1"? Puis-je/devrais-je déclarer un attribut de contexte pour mon menu personnalisé d'origine? Merci.

javascripttinymcevisual-editorplugin-tinymce
2
Kevin Nugent

addMenuItem() ajoute à la barre d'outils de tinymce, qui n'est pas utilisée par défaut par WP, et utilise context pour être ajouté au (sous) menu particulier. Vous ajoutez une MenuButton et vous pouvez accéder au bouton par le biais du tableau buttons de l'éditeur, indexé par le nom du bouton:

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