Add button(s) to TinyMCE 4.x in Wordpress 4.x

add_buttons_to_tinymce.js

( function() {
    tinymce.PluginManager.add( 'dqshortcodes', function( editor, url ) {
        console.log(url);
        // Add a button that opens a window
        editor.addButton( 'showrecent', {

            text: 'Recent posts',
            icon: false,
            onclick: function() {
                // Open window
                editor.windowManager.open({
                    title: 'Example plugin',
                    body: [{
                                type: 'textbox',
                                name: 'numberofposts',
                                label: 'Number of posts'
                           }
                    ],
                    onsubmit: function( e ) {
                        // Insert content when the window form is submitted
                        console.log(e.data.numberofposts);
                        var string = "[recent-posts";
                        if(e.data.numberofposts != ""){
                            string += " numbers="+e.data.numberofposts;
                        }
                        string += "]";
                        editor.insertContent( string );
                    }

                });
            }

        });

    });

})();

shortcodes.php

/*
--------------- Adding shortcode buttons to editor ----------------------*/
add_action('admin_init', 'dq_shortcode_button');

function dq_shortcode_button()
{
    if( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
    {
        add_filter( 'mce_external_plugins', 'dq_add_buttons'); 
        add_filter( 'mce_buttons', 'dq_register_buttons' );
    }
}

function dq_add_buttons( $plugin_array )
{
    $plugin_array['dqshortcodes'] = get_stylesheet_directory_uri(). '/js/add_buttons_to_tinymce.js';
    return $plugin_array;
}

function dq_register_buttons( $buttons )
{
    array_push( $buttons, 'showrecent');
    var_dump($buttons);
    return $buttons;
}