我在Wordpress中向TinyMCE编辑器添加列表框时遇到问题。我已经通读了这个问题，但并没有完全理解：How i can i add a split button or list box to the WordPress TinyMCE instance. 该解决方案仅在对话框中提醒值。我想在TinyMCE编辑器中插入短代码，但我不知道如何插入。我成功地将自定义按钮和列表框添加到TinyMCE编辑器中，按钮可以工作，但列表框不能。这是我的功能。php代码：
// 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
下面是我的JS，用于将列表框添加到TinyMCE编辑器：
// 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);
我需要在JS中做什么更改才能将短代码添加到编辑器中，而不仅仅是在模式对话框中显示列表框的值？
最合适的回答,由SO网友:t31os 整理而成
在我编写的TinyMCE插件中，我的列表框将所选文本包装为HTML，我这样做。。
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
您可能会注意到我的函数正在从JS变量中读取一些数据，这些数据在您自己的脚本中不可用，但这里有一个基本的精简版本，应该适合您。
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;
}
为了确保我的意思清楚，上面的代码将替换以下代码部分。。。
onselect : function(v) {
tinyMCE.activeEditor.windowManager.alert(\'Value selected:\' + v);
}
希望有帮助……：）
如果您正在创建自己的TinyMCE实例，而不仅仅是在WordPress实例中添加ed 可能不会设置var。
更改此。。
// Set focus to WordPress editor
ed.focus();
// Get selected text
var sel_txt = ed.selection.getContent();
用于。。（从我的头顶）
var sel_txt = tinyMCE.activeEditor.selection.getContent();
看看这是否有帮助。。
