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.

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:

// 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?

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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

share|improve this answer
    
That definitely gets me much closer. The only problem I now have is "ed.focus is not a function". In my code I don't actually see where I'm passing the ed object in. How do I get the Wordpress editor object in my code? I really appreciate the help on this (I'm not an expert in JS as you can clearly see). –  Industrial Themes Apr 1 '11 at 14:53
    
Ah yes, you might be using it differently than me, i'll update the answer. –  t31os Apr 1 '11 at 16:52
    
Ah, now I understand what ed represents. That worked perfectly, thank you so much for following up with my question. I will absolutely pay it forward, sir. –  Industrial Themes Apr 1 '11 at 17:18
    
You're welcome... :) –  t31os Apr 1 '11 at 18:10
add comment

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);
                }
  })
share|improve this answer
add comment

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.