How do I add a listbox to the TinyMCE editor?

4 Views

I am having trouble adding a list box to the TinyMCE editor in WordPress. I have already read entirely through this question but it did not get me all the way there: How i can i add a split button or list box to the WordPress TinyMCE instance. That solution only alerts the value in a dialog box. I want to actually insert the shortcode into the TinyMCE editor and I can’t figure out how. I am successfully able to add custom buttons and listboxes to the TinyMCE editor, and the buttons work but the listbox does not. Here’s my functions.php code: 

// add shortcode buttons to the tinyMCE editor row 3
function add_button_3() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_external_plugins', 'add_plugin_3');
     add_filter('mce_buttons_3', 'register_button_3');
   }
}
//setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_push($buttons, "dropcap");
   array_push($buttons, "divider");
   array_push($buttons, "quote");
   array_push($buttons, "pullquoteleft");
   array_push($buttons, "pullquoteright");
   array_push($buttons, "boxdark");
   array_push($buttons, "boxlight");
   array_push($buttons, "togglesimple");
   array_push($buttons, "togglebox");
   array_push($buttons, "tabs");
   array_push($buttons, "signoff");  
   array_push($buttons, "fancylist");
   array_push($buttons, "arrowlist");
   array_push($buttons, "checklist");
   array_push($buttons, "starlist");
   array_push($buttons, "pluslist");
   array_push($buttons, "heartlist");
   array_push($buttons, "infolist"); 
   array_push($buttons, "columns");
   return $buttons;
}
//setup array for tinyMCE editor interface
function add_plugin_3($plugin_array) {
   $plugin_array['fancylist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['arrowlist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['checklist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['starlist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pluslist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['heartlist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['infolist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['signoff'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['dropcap'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['divider'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteleft'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteright'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxdark'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxlight'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglesimple'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglebox'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['tabs'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['columns'] = get_bloginfo('template_url').'/js/customcodes.js';
   return $plugin_array;
}
add_action('init', 'add_button_3'); // add the add_button function to the page init

And here is my JS for adding the listbox to the TinyMCE editor:

Read More
// Creates a new plugin class and a custom listbox
tinymce.create('tinymce.plugins.columns', {
    createControl: function(n, cm) {
        switch (n) {
            case 'columns':
                var mlb = cm.createListBox('columns', {
                    title : 'Add a Column',
                    onselect : function(v) {
                        tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
                    }
                });

                // Add some values to the list box
                mlb.add('One Third', 'one_third');
                mlb.add('One Third (last)', 'one_third_last');
                mlb.add('Two Thirds', 'two_thirds');

            // Return the new listbox instance
            return mlb;

        }
        return null;
    }
});
tinymce.PluginManager.add('columns', tinymce.plugins.columns);

What do I need to change in the JS for it to actually add the shortcode to my editor instead of just displaying the value of the listbox in a modal dialog?

Post Views: 4

Related posts

Leave a Reply

2 comments

  1. In the TinyMCE plugin i wrote, my listbox wraps selected text in HTML, i do that like this..

    onselect : function(v) {
    // Set focus to WordPress editor
    ed.focus(); 
    
    // Get selected text
    var sel_txt = ed.selection.getContent();

    // If no text selected
    if( '' == sel_txt )
        return null;
    
    var active_style = toggle_styles[v];
    if( 'undefined' == active_style || typeof( active_style ) != 'object' )
        return null;
    
    tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, '<'+active_style.tag+' class="'+active_style.classes+'">'+sel_txt+'</'+active_style.tag+'> ' );
    //alert( tinyMCE.activeEditor.selection.getNode().nodeName );
    return false;
} // close onselect function

    You might notice my function is reading in some data from a JS var, that won’t be available inside your own script, but here’s a basic trimmed down version that should work for you.

    onselect : function(v) {
    // Set focus to WordPress editor
    ed.focus(); 
    
    // Get selected text
    var sel_txt = ed.selection.getContent();

    // If no text selected
    if( '' == sel_txt )
        return null;
    
    tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, '<div class="someclass">'+sel_txt+'</div> ' );

    return false;
}

    Just to make sure i’ve been clear, the above would replace the following part of your code…

    onselect : function(v) {
    tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
}

    Hope that helps… 🙂

    Follow-up #1

    If you’re creating your own TinyMCE instance and not just adding to the WordPress instance the ed var possibly won’t be set.

    Change this..

    // Set focus to WordPress editor
ed.focus(); 

// Get selected text
var sel_txt = ed.selection.getContent();

    for.. (off the top of my head)

    var sel_txt = tinyMCE.activeEditor.selection.getContent();

    See if that helps..

  2. I think there is one short solution for this:

       var mlb = cm.createListBox('columns', {
                title : 'Add a Column',
                onselect : function(v) {
                    /* simpler right? */
                    tinyMCE.activeEditor.selection.setContent(v);
                }
  })