Как добавить несколько кнопок в TinyMCE в WP?

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() принимает несколько значений push. Вот его документация на php.net

Answer 2

Измените php на шаге 3, чтобы нажимать вторые кнопки:

//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, потому что они не различаются с термином «цитата»:

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

Answer 3

Помимо добавления дополнительного кода кнопки в уже существующие функции, я не думаю, что есть способ сделать то, что вы пытаетесь.

К сожалению, это код для добавления кнопки, поэтому, если вы хотите добавить еще одну кнопку, вам нужно добавить код снова.

Если бы кнопки, которые вы хотели добавить, были почти одинаковыми, вы, возможно, могли бы отказаться от выполнения 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 это определенно то, что есть. Это позволяет избежать потенциальных конфликтов имен функций позже.

Answer 4

Если все кнопки связаны, и вы хотите добавить их все сразу (т.е. вам не нужно выбирать, какие кнопки добавляются, вы можете просто дублировать вызовы ed.addButton в вызове init. имеет смысл инкапсулировать каждый вызов 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);  
})();

, чтобы получить дальнейшую декомпозицию, затем вы можете разделить функции добавления кнопок * на их собственные файлы (как предложено @DouglasMarken).