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?
2 Answers
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..
