Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
The tinymce is getting a complete overhaul in wordpress 3.9 as far as I know. –  Pieter Goosen Mar 27 at 10:22
    
Yes, TinyMCE was updated in 3.9. As an aside, I'm a big believer that shortcodes should be in plugins and not themes. –  helgatheviking Mar 27 at 11:19
    
@helgatheviking it comes from a dedicated plugin and not within a theme, this is so we can add plugins to all our websites easily, but what has themes and plugins got to do with creating a dropdown? I am not understanding your point? –  Robert Mar 27 at 11:42
    
Hi @PieterGoosen I am aware of this :) that is why I have posted this question :) –  Robert Mar 27 at 11:42
    
Sorry, I read that you were testing your theme and mistakenly assumed that you were including the shortcodes in your theme. –  helgatheviking Mar 27 at 12:19

1 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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.