要将我们的按钮添加到TinyMCE编辑器,我们需要做以下几件事:
将我们的按钮添加到工具栏中注册一个TinyMCE插件创建一个TinyMCE插件,该插件告诉TinyMCE单击按钮时要做什么
步骤#1和#2
在这些步骤中,我们注册了我们的TinyMCE插件,该插件将位于
\'path/to/shortcode.js\'
(参见
wpse72394_register_tinymce_plugin()
(见下文)
// init process for registering our button
add_action(\'init\', \'wpse72394_shortcode_button_init\');
function wpse72394_shortcode_button_init() {
//Abort early if the user will never see TinyMCE
if ( ! current_user_can(\'edit_posts\') && ! current_user_can(\'edit_pages\') && get_user_option(\'rich_editing\') == \'true\')
return;
//Add a callback to regiser our tinymce plugin
add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin");
// Add a callback to add our button to the TinyMCE toolbar
add_filter(\'mce_buttons\', \'wpse72394_add_tinymce_button\');
}
//This callback registers our plug-in
function wpse72394_register_tinymce_plugin($plugin_array) {
$plugin_array[\'wpse72394_button\'] = \'path/to/shortcode.js\';
return $plugin_array;
}
//This callback adds our button to the toolbar
function wpse72394_add_tinymce_button($buttons) {
//Add the button ID to the $button array
$buttons[] = "wpse72394_button";
return $buttons;
}
现在我们需要创建TinyMCE插件。这将被归档
\'path/to/shortcode.js\'
(如早期步骤中所述)。
jQuery(document).ready(function($) {
tinymce.create(\'tinymce.plugins.wpse72394_plugin\', {
init : function(ed, url) {
// Register command for when button is clicked
ed.addCommand(\'wpse72394_insert_shortcode\', function() {
selected = tinyMCE.activeEditor.selection.getContent();
if( selected ){
//If text is selected when button is clicked
//Wrap shortcode around it.
content = \'[shortcode]\'+selected+\'[/shortcode]\';
}else{
content = \'[shortcode]\';
}
tinymce.execCommand(\'mceInsertContent\', false, content);
});
// Register buttons - trigger above command when clicked
ed.addButton(\'wpse72394_button\', {title : \'Insert shortcode\', cmd : \'wpse72394_insert_shortcode\', image: url + \'/path/to/image.png\' });
},
});
// Register our TinyMCE plugin
// first parameter is the button ID1
// second parameter must match the first parameter of the tinymce.create() function above
tinymce.PluginManager.add(\'wpse72394_button\', tinymce.plugins.wpse72394_plugin);
});