如何在WP中为TinyMCE添加多个按钮? [英] How to add multiple buttons to TinyMCE in WP?

问题描述

我关注了有关Nettuts的教程，该教程介绍了如何向TinyMCE添加自定义按钮(

I've followed a tutorial on Nettuts on how to add a custom button to TinyMCE (http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/)

这一切都很好，但是我想添加许多按钮，我想知道是否存在一种聪明的方法，而不必一遍又一遍地重复所有代码.

It works great and all, but i want to add many buttons and i wonder if there's a smart way to do this without having to duplicate all the code over and over.

这是我用来添加按钮的代码:

Here's the code i use for adding a button:

add_shortcode("quote", "quote");  
function quote( $atts, $content = null ) {  
    return '<div class="right text">"'.$content.'"</div>';  
}

add_action('init', 'add_button');  
function add_button() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin');  
     add_filter('mce_buttons_3', 'register_button');  
   }  
}  
function register_button($buttons) {  
   array_push($buttons, "quote");  
   return $buttons;  
}  
function add_plugin($plugin_array) {  
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';  
   return $plugin_array;  
}  

然后我用以下代码创建一个customcodes.js文件:

And then i create a customcodes.js file with this code in:

(function() {  
    tinymce.create('tinymce.plugins.quote', {  
        init : function(ed, url) {  
            ed.addButton('quote', {  
                title : 'Add a Quote',  
                image : url+'/image.png',  
                onclick : function() {  
                     ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');  

                }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('quote', tinymce.plugins.quote);  
})();

再次，我如何添加多个按钮而不必为每个新按钮执行所有这些代码?

So again, how can i add multiple buttons without having to do all this code for each new button?

谢谢:)塞巴斯蒂安

推荐答案

如果我正确理解了您的问题，则希望添加更多按钮，而不必复制 register_button($ buttons)和 add_plugin($ plugin_array)函数?

If i am understanding your question correctly you want to add to more buttons without having to make duplicates of the register_button($buttons) and add_plugin($plugin_array) functions?

我知道这是一个老问题，但是有一种方法可以做到不重复功能.

I know this is an old question, but there is a way to do it without duplicating the functions.

只需进入您的customcodes.js并在 init:function(ed，url)中创建新按钮，就像您创建第一个按钮一样，就这样:

Just go into your customcodes.js and in the init : function(ed, url) create new buttons just like you did the first one, so it would look as such:

init : function(ed, url) {  
             /* your original button */
            ed.addButton('quote', {  
            title : 'Add a Quote',  
            image : url+'/image.png',  
            onclick : function() {  
                 ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]'); 
            }  
        }); 
            /* your second button */
            ed.addButton('singlequote', {  
            title : 'Add a Single Quote',  
            image : url+'/image.png',  
            onclick : function() {  
                 ed.selection.setContent('[singlequote]' + ed.selection.getContent() + '[/singlequote]'); 
            }  
        }); 
} 

依此类推，您可以根据需要选择任意数量的按钮.

And so forth, as many buttons as you require.

之后，只需返回您的 register_button($ buttons)函数并更新 array_push().

After that just head back to your register_button($buttons) function and update the array_push().

因此，当您只有一个按钮要添加时，它看起来像这样:

So whilst, when you had only one button to add it looked like this:

function register_button($buttons) {  
array_push($buttons, "quote");  
return $buttons;  }

现在，您创建了新按钮，此功能将如下所示.

Now that you created your new buttons this function would look like this.

function register_button($buttons) {  
array_push($buttons, "quote", "singlequote");  
return $buttons; }  

依此类推，具体取决于您添加了多少个新按钮.

And so on, depending how many new buttons youve added.

您不需要重复功能，也不需要添加新操作和过滤器即可向tinyMCE添加新按钮.

You do not need to duplicate functions, or add new actions and filters to add new buttons to your tinyMCE.

您只需在tinyMCE插件中创建新按钮，然后列出您在 array_push()中创建的按钮的名称.

You just create the new buttons inside your tinyMCE plug-in and list the names of the buttons youve created inside the array_push().

也许您不知道 array_push()接受多个推送值.此处是有关php.net的文档

Perhaps you werent aware that array_push() accepts multiple push values. Here is its documentation on php.net

这篇关于如何在WP中为TinyMCE添加多个按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！