如何在TinyMCE中添加多个按钮?

时间:2011-04-02 作者:sebfck

我已经学习了一个关于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);  
})();
那么,我怎样才能添加多个按钮,而不必为每个新按钮执行所有这些代码呢?

谢谢:)塞巴斯蒂安

3 个回复
最合适的回答,由SO网友:t31os 整理而成

首先在按钮回调中添加其他按钮。。

function register_button($buttons) {  
   array_push($buttons, "quote","wpse-rules");  
   return $buttons;  
}
然后在插件javascript中添加其他按钮功能。。

    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]\');  
            }  
        });
        ed.addButton(\'wpse-rules\', {  
            title : \'WPSE Rules\',  
            image : url+\'/image.png\',  
            onclick : function() {  
                 alert( \'WPSE Rules!\' ); 
            }  
        });  
    },
等等,对于您想要的任何其他按钮。。

SO网友:Neil Davidson

通读和/或下载my中的文件tutorial on this. 我建议这样做的原因是因为我把它都放在一个类中,所以实际上不需要为每个按钮反复编写代码!

现在,该类基本上会在每次您在WordPress一侧实例化它时为您编写代码,但您仍然需要为每个按钮编写javascript功能。

无论需要多少个按钮,创建按钮的过程都是相同的。每个按钮的功能都是唯一的,这就是为什么需要为每个按钮调用唯一的javascript。

SO网友:Soykot

如果要在文本编辑器部分添加按钮,请查看wordpress的QuickTag(但在视觉编辑器部分不起作用)

结束

相关推荐

ShortCode and extra </p>

[box id=“1”text=“一些文本”]短代码在某一点上是输出文本html结果为:</p> some text </p>开头有一个额外的结束段落,结尾有一个开头。。。为什么?这些是从哪里来的?。。。。有什么想法吗?。。它搞砸了我的w3验证!**注意我发现。。。但在我看来,一切都“修补”了。。。任何干净的溶液。。。wp脏了吗?reference