Custom Shortcodes not working in WordPress 3.9 TinyMCE 4 Visual editor

Question

I had a drop-down list displaying all of my custom shortcodes in the tinymce editor. Below is my code in my functions file:

function register_customcode_dropdown( $buttons ) {
   array_push( $buttons, "Shortcodes" );
   return $buttons;
}

function add_customcode_dropdown( $plugin_array ) {
   $plugin_array['Shortcodes'] = get_template_directory_uri() . '/js/mybuttons.js';
   return $plugin_array;
}

function customcode_dropdown() {

   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_customcode_dropdown' );
      add_filter( 'mce_buttons', 'register_customcode_dropdown' );
   }

}

add_action('init', 'customcode_dropdown');

After the upgrade to 3.9 the drop-down no longer appears. What changes do I need to make to my code to get this working again? (below is my javascript file code as well)

(function() {


    tinymce.create('tinymce.plugins.Shortcodes', {

        init : function(ed, url) {
        },
        createControl : function(n, cm) {

            if(n=='Shortcodes'){
                var mlb = cm.createListBox('Shortcodes', {
                     title : 'Kleen Shortcodes',
                     onselect : function(v) {




                        if(v == 'Tabs Wrapper'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[tabs_wrap]'+selected+'[/tabs_wrap]';
                            }else{
                                content =  '[tabs_wrap][/tabs_wrap]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }



                        if(v == 'Tab Content'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[tab_content title=""]'+selected+'[/tab_content]';
                            }else{
                                content =  '[tab_content title=""][/tab_content]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }


                        if(v == 'Accordion Wrapper'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[accordion_wrap]'+selected+'[/accordion_wrap]';
                            }else{
                                content =  '[accordion_wrap][/accordion_wrap]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }



                        if(v == 'Accordion Content'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[accordion_content title=""]'+selected+'[/accordion_content]';
                            }else{
                                content =  '[accordion_content title=""][/accordion_content]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Button Link'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[button_link]'+selected+'[/button_link]';
                            }else{
                                content =  '[button_link][/button_link]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }


                        if(v == 'Column 1/2'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_half]'+selected+'[/one_half]';
                            }else{
                                content =  '[one_half][/one_half]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Column 1/2 Last'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_half_last]'+selected+'[/one_half_last]';
                            }else{
                                content =  '[one_half_last][/one_half_last]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Column 1/3'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_third]'+selected+'[/one_third]';
                            }else{
                                content =  '[one_third][/one_third]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Column 1/3 Last'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_third_last]'+selected+'[/one_third_last]';
                            }else{
                                content =  '[one_third_last][/one_third_last]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }


                        if(v == 'Column 1/4'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_fourth]'+selected+'[/one_fourth]';
                            }else{
                                content =  '[one_fourth][/one_fourth]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Column 1/4 Last'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_fourth_last]'+selected+'[/one_fourth_last]';
                            }else{
                                content =  '[one_fourth_last][/one_fourth_last]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }



                        if(v == 'Column 1/2 Center'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_half_center]'+selected+'[/one_half_center]';
                            }else{
                                content =  '[one_half_center][/one_half_center]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Column 1/2 Center Last'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_half_center_last]'+selected+'[/one_half_center_last]';
                            }else{
                                content =  '[one_half_center_last][/one_half_center_last]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Column 1/3 Center'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_third_center]'+selected+'[/one_third_center]';
                            }else{
                                content =  '[one_third_center][/one_third_center]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Column 1/3 Center Last'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_third_center_last]'+selected+'[/one_third_center_last]';
                            }else{
                                content =  '[one_third_center_last][/one_third_center_last]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }


                        if(v == 'Column 1/4 Center'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_fourth_center]'+selected+'[/one_fourth_center]';
                            }else{
                                content =  '[one_fourth_center][/one_fourth_center]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Column 1/4 Center Last'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_fourth_center_last]'+selected+'[/one_fourth_center_last]';
                            }else{
                                content =  '[one_fourth_center_last][/one_fourth_center_last]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }



                        if(v == 'Column 3/4'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[three_fourth]'+selected+'[/three_fourth]';
                            }else{
                                content =  '[three_fourth][/three_fourth]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Column 3/4 Last'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[three_fourth_last]'+selected+'[/three_fourth_last]';
                            }else{
                                content =  '[three_fourth_last][/three_fourth_last]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                                    if(v == 'Column 2/3'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[two_third]'+selected+'[/two_third]';
                            }else{
                                content =  '[two_third][/two_third]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Column 2/3 Last'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[two_third_last]'+selected+'[/two_third_last]';
                            }else{
                                content =  '[two_third_last][/two_third_last]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Highlight Text'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[highlight]'+selected+'[/highlight]';
                            }else{
                                content =  '[highlight][/highlight]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                        if(v == 'Blockquote'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[blockquote]'+selected+'[/blockquote]';
                            }else{
                                content =  '[blockquote][/blockquote]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }



                                    if(v == 'Recent Post'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[post_recent posts="2"]';
                            }else{
                                content =  '[post_recent posts="2"]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }


                                    if(v == 'Recent Sermons'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[recent_sermons posts="2"]';
                            }else{
                                content =  '[recent_sermons posts="2"]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }


                                    if(v == 'Staff List'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[staff_category posts="4" staff_category=""]';
                            }else{
                                content =  '[staff_category posts="4" staff_category=""]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }



                        if(v == 'Check List'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[check_list]'+selected+'[/check_list]';
                            }else{
                                content =  '[check_list][/check_list]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                                    if(v == 'Times List'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[times_list]'+selected+'[/times_list]';
                            }else{
                                content =  '[times_list][/times_list]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                                    if(v == 'Arrow List'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[arrow_list]'+selected+'[/arrow_list]';
                            }else{
                                content =  '[arrow_list][/arrow_list]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }

                                                if(v == 'Horizontal Rule Center'){

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[horizontal_rule_center]'+selected+'[/horizontal_rule_center]';
                            }else{
                                content =  '[horizontal_rule_center][/horizontal_rule_center]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        }






                     }
                });


                // Add some menu items
                var my_shortcodes = ['Accordion Content','Accordion Wrapper','Arrow List','Blockquote','Button Link','Check List','Column 1/4 Last','Column 1/4','Column 1/2 Last','Column 1/2','Column 1/3 Last','Column 1/3','Column 3/4 Last','Column 3/4','Column 2/3 Last','Column 2/3','Column 1/2 Center','Column 1/2 Center Last','Column 1/3 Center','Column 1/3 Center Last','Column 1/4 Center','Column 1/4 Center Last','Highlight Text','Horizontal Rule Center','Recent Post','Recent Sermons','Staff List','Tab Content','Tabs Wrapper','Times List'];

                for(var i in my_shortcodes)
                    mlb.add(my_shortcodes[i],my_shortcodes[i]);

                return mlb;
            }
            return null;
        }


    });
    tinymce.PluginManager.add('Shortcodes', tinymce.plugins.Shortcodes);
})();

Answer 1

With tinymce4 there are many things that need to be handled differently than with tinymce3. createControl doesn't exist anymore. You will have to modify your plugin code in order to work with tinymce4 (see the migration guide from tinymce3.x).

Here is an example for a custom dropdownbutton to select styles.

        ed.addButton('xstyle', {
            type: 'listbox',
            text: 'my_text',
            icon: false,
            tooltip: 'my_tooltip_text',
            fixedWidth: true,
            onselect: function(e)
            {
                var options = {paragraphs: 1, calldirect: 1};
                var format_to_apply = this.text();
                                    ...
                ed.focus();
            },
            values: xstyle_options, // array
            onPostRender: function() 
            {
                ed.my_style_control = this;
            }
        });

Answer 2

I found a plugin that helped me adding a shortcode-button to the editor. I've installed it yesterday and it's pretty nice. You have to create a file contain the info of your shortcodes and the rest is done by the plugin:

http://wordpress.org/plugins/wp-shortcode-helper/

Install the plugin, activate it and create a file "shortcodes.json" in your template-folder. There you can save everything that the plugin needs. See the sample-code:

[{
    "text": "Button",
    "value": "btn",
    "content": true,
    "description": true,
    "description_text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
    "options": [
        {
            "type": "textbox",
            "name": "href",
            "label": "URL"
        },
        {
            "type": "select",
            "name": "blank",
            "label": "New Tab",
            "options": [
                {
                    "text": "No",
                    "value": "no"
                },
                {
                    "text": "Yes",
                    "value": "yes"
                }
            ]
        }
    ]
},

{
    "text": "1/2 Column",
    "value": "one_half",
    "content": true,
    "description": true,
    "description_text": "Creates a 1/2 column",
    "options": [
        {
            "type": "select",
            "name": "position",
            "label": "Position",
            "options": [
                {
                    "text": "First",
                    "value": "first"
                },
                {
                    "text": "Last",
                    "value": "last"
                }
            ]
        }
    ]
},

{
    "text": "1/3 Column",
    "value": "one_third",
    "content": true,
    "description": true,
    "description_text": "Creates a 1/3-Column",
    "options": [
        {
            "type": "select",
            "name": "position",
            "label": "Position",
            "options": [
                {
                    "text": "First",
                    "value": "first"
                },
                {
                    "text": "Last",
                    "value": "last"
                }
            ]
        }
    ]
},

{
    "text": "2/3 Column",
    "value": "two_third",
    "content": true,
    "description": true,
    "description_text": "Creates a 2/3-Column",
    "options": [
        {
            "type": "select",
            "name": "position",
            "label": "Position",
            "options": [
                {
                    "text": "First",
                    "value": "first"
                },
                {
                    "text": "Last",
                    "value": "last"
                }
            ]
        }
    ]
},

{
    "text": "Tabwrapper",
    "value": "tabwrapper",
    "description": true,
    "content": true,
    "description_text": "Creates a Wrapper for Tabs"
},

{
    "text": "Tab",
    "value": "tab",
    "content": true,
    "description": true,
    "description_text": "Creates a Tab",
    "options": [
        {
            "type": "select",
            "name": "active",
            "label": "Active",
            "options": [
                {
                    "text": "Yes",
                    "value": "yes"
                },
                {
                    "text": "No",
                    "value": "no"
                }
            ]
        },
        {
            "type": "textbox",
            "name": "title",
            "label": "Title"
        }
    ]
}]

As you can see, there are now 6 shortcodes. Obviously you have to edit this for your needs.