Adding Custom Dropdown Box In TinyMCE In WordPress

Question

Ive been trying to get this done for hours now and its making my head rattle.

Ive nearly got it, but unfortunately when no content is wrapped its showing the title of the shortcode.

For instance one of my titles is shortcode 1 and when its wrapped around some text it should show [thirdwidth]content goes here[/thirdwidth]

But if i do not wrap it, it shows the title.

shortcode 1[thirdwidth][/thirdwidth]

Why is this doing it?

Here is the code on the php front:

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

function add_customcode_dropdown( $plugin_array ) {
   $plugin_array['Shortcodes'] = get_template_directory_uri() . '/style/js/TinyMCE_js.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');

Here is the TinyMCE_js.js file

(function() {


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

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

            if(n=='Shortcodes'){
                var mlb = cm.createListBox('Shortcodes', {
                     title : 'Shortcodes',
                     onselect : function(v) {
                        if(tinyMCE.activeEditor.selection.getContent() == ''){
                            tinyMCE.activeEditor.selection.setContent( v )
                        }


                        if(v == 'shortcode 1'){

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

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

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

                        }

                        if(v == 'shortcode 2'){

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

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

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

                        }


                     }
                });


                // Add some menu items
                var my_shortcodes = ['shortcode 1','shortcode 2'];

                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);
})();

Thanks

Answer 1

Found the issue, it was I left this in:

if(tinyMCE.activeEditor.selection.getContent() == ''){
                            tinyMCE.activeEditor.selection.setContent( v )
                        }