web-dev-qa-db-ja.com

カスタムTinyMCEメニューに項目を追加する

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

Q：元の機能の外でこのメニューに項目をプッシュすることは可能ですか？私は、 'context'を 'nto_shortcode_button1'として引用しているのです。オリジナルのカスタムメニューのコンテキスト属性を宣言できますか。ありがとう。

javascripttinymcevisual-editorplugin-tinymce
2
Kevin Nugent

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