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

问题描述 投票：0回答：4

我遵循了 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);  
})();

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

谢谢:)塞巴斯蒂安

php wordpress button tinymce shortcode
4个回答
8
投票

如果我正确理解你的问题，你想添加更多按钮，而不必重复 

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()
接受多个推送值。 这是 php.net 上的文档

2
投票

修改第 3 步中的 php 以按下第二个按钮：

//Step 3: Register Our Button
function register_button($buttons) {  
   array_push($buttons, "BOUTON1");  
   array_push($buttons, "BOUTON2");  
   return $buttons;  
}

向 BOUTON2 添加特定通行证：

//Step 4: Register Our TinyMCE Plugin
    function add_plugin($plugin_array) {  
       $plugin_array['BOUTON1'] = '/yourpathtojs/bouton1.js';  
       $plugin_array['BOUTON2'] = '/yourpathtojs/bouton2.js';  
       return $plugin_array;  
    }

然后每个文件都有不同的文件，看看PLUG1和BOUTON1的使用，它比在nettuts上更好，因为它们不与术语“quote”进行区分：

bouton1.js：

(function() {  
    tinymce.create('tinymce.plugins.PLUG1', {  
        init : function(ed, url) {  
            ed.addButton('BOUTON1', {  
                title : 'You', image : url+'/image.png',  
                onclick : function() { ed.selection.setContent('[thumb from="youtube" code="'+ed.selection.getContent()+'"]'); }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('BOUTON1', tinymce.plugins.PLUG1);  
})();

bouton2.js：

(function() {  
        tinymce.create('tinymce.plugins.PLUG2', {  
            init : function(ed, url) {  
                ed.addButton('BOUTON2', {  
                    title : 'Vim', image : url+'/image.png',  
                    onclick : function() { ed.selection.setContent('[thumb from="vimeo" code="'+ed.selection.getContent()+'"]'); }  
                });  
            },  
            createControl : function(n, cm) {  
                return null;  
            },  
        });  
        tinymce.PluginManager.add('BOUTON2', tinymce.plugins.PLUG2);  
    })();
1
投票

除了在现有函数中添加额外的按钮代码之外，我认为没有办法完成您正在尝试的操作。

不幸的是，这是添加按钮的代码，因此如果您想添加另一个按钮，则必须再次添加代码。

如果您想要添加的按钮几乎在所有方面都相似，您可能可以通过执行 

foreach {}
后跟 
switch(){case '':}
来输入数据，但除非所有按钮都执行相同的操作，否则这似乎是一个有点多余。

如果您想要做的只是保持 function.php 文件整洁，那么我建议将每个按钮放在一个单独的 .php 文件中，该文件的名称与主函数相同，位于名为 inc 的文件夹中，或者包含在模板中，然后包含他们喜欢这样：

$temp_path = 'http//www.yourdomain.com/wp-content/theme/yourtheme/includes/';


include $temp_path.'file1.php';
include $temp_path.'file2.php';

我正在使用 temp_path 变量，因为出于某种原因 

bloginfo()
和 
get_bloginfo()
似乎在函数文件中不起作用。

顺便说一句，即使它仅供个人使用，也请尝试使用更独特的函数名称，

quote
可以是任何东西，
tinymce_quote_button
绝对就是这样。这可以避免以后潜在的函数名称冲突。

0
投票

如果所有按钮都是相关的，并且您想一次添加它们（即您不需要选择添加哪些按钮，您可以在 init 调用中复制 ed.addButton 调用。这是有意义的将每个 addbutton 调用封装到它自己的函数中，

(function() {  
    function addQuoteButton(ed, url){
        ed.addButton('quote', {  
            title : 'Add a Quote',  
            image : url+'/image.png',  
            onclick : function() {  
                 ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');  
            }  
        });  
    }
    function addOtherButton(ed, url){
        // functionality to add another button.
    }
    tinymce.create('tinymce.plugins.quote', {  
        init : function(ed, url) {
            addQuoteButton(ed, url);
            addOtherButton(ed,url);  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('quote', tinymce.plugins.quote);  
})();

为了进一步分解，您可以将 add*Button 函数拆分到它们自己的文件中（如 @DouglasMarken 所建议）。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.