spot_img
HomeWordPress教程wordpress建站公司 如何向 TinyMCE 添加多个按钮?

wordpress建站公司 如何向 TinyMCE 添加多个按钮?

spot_img

JasperAI 10000字免费额度试用

我已经按照 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 文件:

WordPress divi主题
(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);  
})();

那么,我又该如何添加多个按钮,而不必为每个新按钮编写所有这些代码呢?

谢谢 :) 塞巴斯蒂安

首先在按钮回调中添加您的其他按钮..

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

依此类推,对于您想要的任何其他按钮..

高质量外链购买

通读和/或下载我的教程中的文件。 我建议这样做的原因是因为我将它们全部放入一个类中,因此您实际上不需要为每个按钮一遍又一遍地编写代码!

WordPress建站服务

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

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

5分钟生成10篇英文软文article forge软件试用
siteground guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES