将项目添加到自定义TinyMCE菜单

时间:2015-07-06 作者:Kevin Nugent

我已经创建了一个自定义菜单,它显示在我的TinyMCE工具栏上,但我想在插件其他地方的单独功能中向该菜单添加另一项(取决于其他功能是否处于活动状态)。我曾希望addMenuItem能成功,但我无法实现。我怀疑这可能与我的“上下文”理解错误有关。有人能告诉我这是否可能吗?

以下是添加自定义菜单的功能:

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

                            }
                        });
                    }
                }
            ]
        });
    });
})();
。。。这是我希望稍后在菜单上弹出的另一个项目:

(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!\');
            }
        });
    });
})();
问:是否可以在原始功能之外将项目推入此菜单?我引用“context”作为“nto\\u shortcode\\u button1”对吗。是否可以/应该为原始自定义菜单声明上下文属性?谢谢

1 个回复
SO网友:bonger

addMenuItem() 添加到tinymce的工具栏,默认情况下WP不使用该工具栏,并使用context 添加到特定(子)菜单。您正在添加MenuButton, 您可以通过编辑器的buttons 数组,由按钮名称键入:

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

结束