如何在 TinyMCE 编辑器 WordPress 中添加自定义短代码按钮

Question

您好，我正在使用最新版本的 WordPress。我想在 TinyMCE 编辑器中添加我的简码，如下图：http://prntscr.com/72ycrs

我的简码是：

[my_tabs]
[my_tab title = "Tab One Title"]Tab One Content Goes Here[/my_tab]
[my_tab title = "Tab Two Tiltle"] 
[my_gallery source = "media: 2893" title = "Image Title"] 
Tab Two COntent Goes Here [/my_tab] 
[/my_tabs]

谁能帮我为我的简码创建一个自定义按钮，如上图所示。我不太了解javascript和jQuery。提前致谢。

Answer 1

用Twist That Code: How to Add Custom Buttons for WordPress TinyMCE Editor构建了最简单的弹出窗口

functions.php：

// Filter Functions with Hooks
function harun_mce_button() {
  // Check if user have permission
  if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
    return;
  }
  // Check if WYSIWYG is enabled
  if ( 'true' == get_user_option( 'rich_editing' ) ) {
    add_filter( 'mce_external_plugins', 'harun_tinymce_plugin' );
    add_filter( 'mce_buttons', 'harun_register_mce_button' );
  }
}
add_action('admin_head', 'harun_mce_button');

// Function for new button
function harun_tinymce_plugin( $plugin_array ) {
  $plugin_array['harun_mce_button'] = get_template_directory_uri() .'/js/harun_editor_plugin.js';
  return $plugin_array;
}

// Register new button in the editor
function harun_register_mce_button( $buttons ) {
  array_push( $buttons, 'harun_mce_button' );
  return $buttons;
}

活动主题/js/harun_editor_plugin.js：

(function() {
    tinymce.PluginManager.add('harun_mce_button', function(editor, url) {
        editor.addButton('harun_mce_button', {
            icon: false,
            text: "Harun's Tabs",
            onclick: function() {
                editor.windowManager.open({
                    title: "Insert Harun's Tabs",
                    body: [{
                        type: 'textbox',
                        name: 'tab1title',
                        label: 'Tab One Title',
                        value: ''
                    },
                    {
                        type: 'textbox',
                        name: 'tab1content',
                        label: 'Tab One Content',
                        value: ''
                    },
                    {
                        type: 'textbox',
                        name: 'tab2title',
                        label: 'Tab Two Title',
                        value: ''
                    },
                    {
                        type: 'textbox',
                        name: 'tab2content',
                        label: 'Tab Two Content',
                        value: ''
                    },
                    {
                        type: 'textbox',
                        name: 'gallerysource',
                        label: 'Gallery source',
                        value: ''
                    },
                    {
                        type: 'textbox',
                        name: 'gallerytitle',
                        label: 'Gallery title',
                        value: ''
                    }],
                    onsubmit: function(e) {
                        editor.insertContent(
                            '[my_tabs][my_tab title="' +
                            e.data.tab1title + 
                            '"]' +
                            e.data.tab1content + 
                            '[/my_tab][my_tab title="' +
                            e.data.tab2title + 
                            '"][my_gallery source="' + 
                            e.data.gallerysource + 
                            '" title="' +
                            e.data.gallerytitle + 
                            '"]' +
                            e.data.tab2content + 
                            '[/my_tab][/my_tabs]'
                        );
                    }
                });
            }
        });
    });
})();