it-swarm-pt.com

Como adicionar vários botões ao TinyMCE?

Eu segui um tutorial sobre o Nettuts sobre como adicionar um botão personalizado ao TinyMCE ( http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/ )

Ele funciona muito bem e tudo, mas eu quero adicionar muitos botões e eu me pergunto se há uma maneira inteligente de fazer isso sem ter que duplicar todo o código mais e mais.

Aqui está o código que eu uso para adicionar um botão:

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

E então eu crio um arquivo customcodes.js com este código em:

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

Então, novamente, como posso adicionar vários botões sem ter que fazer todo esse código para cada novo botão?

Obrigado :) Sebastian

7
sebfck

Primeiro adicione seus botões adicionais dentro do callback dos botões.

function register_button($buttons) {  
   array_Push($buttons, "quote","wpse-rules");  
   return $buttons;  
}

Em seguida, adicione botões adicionais dentro do plugin 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!' ); 
            }  
        });  
    },

E assim por diante, para qualquer botão adicional que você quiser ..

5
t31os

Olhe para QuickTag do wordpress, se você quiser adicionar botões na seção de editor de texto (não funciona na parte do editor visual embora)

0
Soykot

Faça uma leitura e/ou faça o download dos arquivos no meu tutorial sobre isto . A razão pela qual eu sugiro isso é porque eu coloco tudo em uma classe para que você não precise realmente escrever o código uma e outra vez para cada botão!

Agora, a classe basicamente escreve o código para você cada vez que você o instancia no lado do WordPress, mas você ainda precisará escrever as funcionalidades do javascript para cada botão.

A criação de um botão é o mesmo processo, não importa quantas você precise. A função de cada botão será única, e é por isso que você precisa de uma única chamada de javascript para cada botão.

0
Neil Davidson