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 had the same issue and was searching around the web. The best possible solution I've found was this article. It worked for me like a charm.

(function() {
"use strict"; 

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

        init : function(ed, url) {

            ed.addButton( 'shortcodes', {
                type: 'listbox',
                text: 'My Shortcodes',
                icon: false,
                onselect: function(e) {
                }, 
                values: [

                    {text: 'H1 Title', onclick : function() {
                        tinymce.execCommand('mceInsertContent', false, '[h1][/h1]');
                    }},

                    {text: 'H2 Title', onclick : function() {

                        var selected2 = false;
                        var content2 = selected2 = tinyMCE.activeEditor.selection.getContent();
                        var h2titleclass = prompt("Would you like a custom class?", "");

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

                        if (selected2 !== '') {
                            content2 = '[h2'+h2titleclass+']' + selected2 + '[/h2]';
                        } else {
                            content2 = '[h2'+h2titleclass+'][/h2]';
                        }

                        tinymce.execCommand('mceInsertContent', false, content2);
                    }},

                ]

            });     

        },


    });

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

Answer 2

In tinymce4 createControl doen't exist anymore.

You will have to create a button and assign text-value pairs as values to that button. Use the onSelect function to do stuff when you choose an elemtn from the dropdow list.

Here is a piece of example code:

var my_options = [];
my_options.push({text: "title1", value: "value1"});
my_options.push({text: "title2", value: "value2"});
my_options.push({text: "title3", value: "value3"});

ed.addButton('shortcodes', {
    type: 'listbox',
    text: 'my_own_decription',
    icon: false,
    tooltip: 'my_own_decription',
    fixedWidth: true,
    onselect: function(e)
    {
        var options = {paragraphs: 1, calldirect: 1};
        var text = this.text();
        var value = this.value();

        console.log("Text choosen:", text);
        console.log("Value choosen:", value);

        // get selection and range
        var selection = ed.selection;
        var rng = selection.getRng();
        ...

        ed.focus();
    },
    values: my_options,
    onPostRender: function() 
    {
        ed.my_control = this; // ui control element
    }
});