Add Custom Button to TinyMCE in WordPress

Question

I want to add a new button with popup to TinyMCE. But i never see the button. I probably are doing wrong this modification. How to insert the new button on that TinyMCE Code?

I have this TinyMCE Code for showing in Wordpress Front-End:

    $qt = '';
if( $this->options[ 'wpcc_edit_in_html' ] ) $qt = array( 'buttons' => 'strong,em,block,del,ul,ol,li,spell,close' );
else {
    $qt = FALSE;
    add_filter( 'wp_default_editor', create_function( '', 'return "tinymce";' ) ); // force visual editor
}
$editor_settings = array(
    'theme_advanced_blockformats' => array( 'h2','h3','p' ),
    'wpautop' => true,
    'media_buttons' => false,
    'tinymce' => array(
        'theme_advanced_buttons1' => 'bold,italic,blockquote,strikethrough,bullist,numlist,spellchecker,|,undo,redo,|,mygallery_button',
        'theme_advanced_buttons2' => '',
        'theme_advanced_buttons3' => '',
        'theme_advanced_buttons4' => ''
    ),
    'quicktags' => $qt
);

And this one to insert new button:

function filter_mce_button( $buttons ) {
        // add a separation before our button, here our button's id is "mygallery_button"
        array_push( $buttons, '|', 'mygallery_button' );
        return $buttons;
    }

    function filter_mce_plugin( $plugins ) {
        // this plugin file will work the magic of our button
        $plugins['myplugin'] = plugin_dir_url( __FILE__ ) . 'mygallery_plugin.js';
        return $plugins;
    }

    add_filter( 'mce_buttons', array( $this, 'filter_mce_button' ) );
    add_filter( 'mce_external_plugins', array( $this, 'filter_mce_plugin' ) );

Answer 1

Read this tutorial. https://www.gavick.com/magazine/adding-your-own-buttons-in-tinymce-4-editor.html#tc-section-4

Very detailed tutorial. But the bare essentials are as follows: in your functions.php add this code to register and create your button:

function add_container_button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
 return;
if ( get_user_option('rich_editing') == 'true') {
 add_filter('mce_external_plugins', 'add_container_plugin');
 add_filter('mce_buttons_3', 'register_container_button');
}
}
add_action('init', 'add_container_button');


function register_container_button($buttons) {
array_push($buttons, "|", "skizzar_container");
return $buttons;
}

function add_container_plugin($plugin_array) {
$plugin_array['skizzar_container'] = plugin_dir_url( __FILE__ ) . 'shortcodes-js/container.js';;
return $plugin_array;
}

Then you'll need to create a js file which handles how the buttons acts in the editor (you can see mine is referenced in the code above as container.js. Here is the code of my js file:

(function() {
tinymce.PluginManager.add('skizzar_container', function( editor, url ) {
    editor.addButton( 'skizzar_container', {
        title: 'Add a Container',
        icon: 'icon dashicons-media-text',
        onclick: function() {
editor.windowManager.open( {
    title: 'Container',
    body: [{
        type: 'listbox',
        name: 'style',
        label: 'Style',
        'values': [
            {text: 'Clear', value: 'clear'},
            {text: 'White', value: 'white'},                
            {text: 'Colour 1', value: 'colour1'},
            {text: 'Colour 2', value: 'colour2'},
            {text: 'Colour 3', value: 'colour3'},
        ]
    }],
    onsubmit: function( e ) {
        editor.insertContent( '[container style="' + e.data.style + '"]<br /><br />[/container]');
    }
});
}

    });
});
})();

This creates a popup with a dropdown menu where the user can select a style. Hope this helps in some way