How to Add Customized Shortcode Button in TinyMCE Editor WordPress

Question

Hi I'm using latest version of WordPress. I want add my shortcode in TinyMCE editor like this image: http://prntscr.com/72ycrs

My shortcode is:

[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]

Can anyone help me to create a customize button for my shortcode as like above image. I don't understand javascript & jQuery much. Thanks in Advance.

Answer 1

Builded the simplest popup with 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;
}

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