Our shortcode dropdown box in Tinymce is not working in WordPress 3.9?

Question

Hi since the new version is about to be released I thought I would download it and see if my theme works still.

Everything works great apart from the dropdown box which is now longer showing.

Here is the codes we used to show it in previous versions.

PHP CODE:

function register_ppp_shortcodes( $buttons ) {
   array_unshift( $buttons, "Shortcodes" );
   return $buttons;
}

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

function ppp_shortcodes() {

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

}

add_action('init', 'ppp_shortcodes');

JS CODE:

/*global tinyMCE, tinymce*/
/*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, unused:true, curly:true, browser:true, devel:true, maxerr:50 */
(function() {
"use strict";   

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

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

            if(n==='Shortcodes'){
                var mtb = cm.createListBox('Shortcodes', {
                     title : 'Shortcodes',
                     onselect : function(p) {
                        var selected = false;
                        var content = '';
                        switch (p){

                        case 'H1 Title':{

                            var h1titleclass = prompt("Would you like a custom class?", "");

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

                            if(h1titleclass != ''){
                                h1titleclass = 'class= "'+h1titleclass+'"';
                            }

                            if (selected) {
                                content = '[h1'+h1titleclass+']' + selected + '[/h1]';
                            } else {
                                content = '[h1'+h1titleclass+'][/h1]';
                            }

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

                        } // finished shortcode
                        break;

                        case 'H2 Title':{

                            var h2titleclass = prompt("Would you like a custom class?", "");

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

                            if(h2titleclass != ''){
                                h2titleclass = 'class= "'+h2titleclass+'"';
                            }

                            if (selected) {
                                content = '[h2'+h2titleclass+']' + selected + '[/h2]';
                            } else {
                                content = '[h2'+h2titleclass+'][/h2]';
                            }

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

                        } // finished shortcode
                        break;

                        }   
                     }
                });


                // Add some menu items
                var my_shortcodes = ['H1 Title','H2 Title'];

                for(var i in my_shortcodes){
                  if (true) {mtb.add(my_shortcodes[i],my_shortcodes[i]);}
                }

                return mtb;
            }
            return null;
        }


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

Can anyone point me in the right direction on where to start.

I know very little about tinymce as you can tell :(

Thanks

Answer 1

I've been stuggeling with a similar issue. (button not appearing in mce editor toolbar). This pattern worked for me in WP 3.9 / tinymce 4.0:

tinymce.PluginManager.add( 'thing' , function( editor ){
    editor.addButton('thing', {
        type: 'listbox',
        text: 'My listbox',
        onselect: function(e) {
            // do things...
        },
        values: [
            {text: 'Menu item 1', value: 'Some text 1'},
            {text: 'Menu item 2', value: 'Some text 2'}
        ]
    });
});

Sad enough this is not backwards compatibele, so you will either break 3.8 support or you will need to implement some version sniffing.