wordpress - 如何在WP中的TinyMCE中添加多个按钮？

Question

我已阅读 Nettuts 上的教程，了解如何向 TinyMCE 添加自定义按钮 ( http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/ )

它工作得很好，但我想添加许多按钮，我想知道是否有一种聪明的方法可以做到这一点，而不必一遍又一遍地复制所有代码。

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

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 文件:

(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);  
})();

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

谢谢:)塞巴斯蒂安

Answer 1

如果我正确理解你的问题，你想添加更多按钮，而不必复制 register_button($buttons) 和 add_plugin($plugin_array) 函数？

我知道这是一个老问题，但是有一种方法可以在不重复功能的情况下做到这一点。

只需进入您的 customcodes.js 并在 init : function(ed, url) 中创建新按钮，就像您对第一个按钮所做的那样，因此它看起来像这样:

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]'); 
            }  
        }); 
} 

依此类推，您需要多少个按钮就可以。

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

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

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

现在您已经创建了新按钮，该函数将如下所示。

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

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

您无需复制功能，或添加新操作和过滤器即可将新按钮添加到tinyMCE。

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

也许您不知道array_push()接受多个推送值。 Here is its documentation on php.net