¿Cómo agregar botones múltiples a TinyMCE en WP?

Question

He seguido un tutorial sobre Nettuts sobre cómo añadir un botón personalizado a TinyMCE (http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/)

funciona muy bien y todo, pero quiero añadir muchos botones y me pregunto si hay una forma inteligente de hacer esto sin tener que duplicar todo el código una y otra vez.

Aquí está el código que utilizo para añadir un botón:

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

Y luego creo un archivo customcodes.js con este código en:

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

Así que de nuevo, ¿Cómo puedo añadir múltiples botones sin tener que hacer todo este código para cada nuevo botón?

Gracias :) Sebastián

Answer 1

Aparte de añadir tal vez el código del botón adicional dentro de sus funciones ya existentes, no creo que hay una manera de hacer lo que estamos tratando.

Lamentablemente, ese es el código para agregar un botón, por lo que si desea agregar otro botón, debe agregar el código nuevamente.

Si los botones que quería agregar eran similares en casi todos los sentidos, podría salirse con la suya haciendo un foreach {} seguido de un switch(){case '':} donde alimenta los datos pero a menos que todos sus botones hagan lo mismo, esto parece un poco redundante.

Si todo lo que estás tratando de hacer es mantener ordenado tu archivo function.php, entonces sugiero poner cada botón en un archivo .php separado con el mismo nombre que la función principal, en una carpeta llamada inc o incluye dentro de tu plantilla , luego incluirlos así:

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


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

estoy usando una variable temp_path porque por alguna razón bloginfo() y get_bloginfo() simplemente no parecen funcionar en el archivo de funciones.

En una nota lateral, aunque sea solo para uso personal, trate de usar nombres de funciones mucho más únicos, quote podría ser cualquier cosa, tinymce_quote_button eso es definitivamente lo que es. Esto evita posibles conflictos de nombre de función más tarde.

Answer 2

Si todos los botones están relacionados y desea agregarlos todos a la vez (es decir, no necesita elegir qué botones se agregan, puede duplicar las llamadas a ed.addButton en la llamada de inicio. tendría sentido para encapsular cada llamada addbutton en su propia función,

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

para obtener la descomposición adicional, se puede entonces dividir las funciones de los botones añadir * a cabo en sus propios archivos (como lo sugiere @DouglasMarken).

Answer 3

Modificar el php en el paso 3 para empujar sus segundos botones:

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

Añadir un pase específico para esa 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; 
    } 

entonces usted tiene archivos distintos para cada uno , mira en el uso de PLUG1 y BOUTON1, es mejor que en nettuts porque no hacen distinción con el término '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); 
    })(); 

Answer 4

Si estoy entendiendo bien su pregunta que desea añadir a más botones sin tener que hacer duplicados de las funciones register_button($buttons) y add_plugin($plugin_array)?

Sé que esta es una pregunta antigua, pero hay una forma de hacerlo sin duplicar las funciones.

Simplemente entra en tu customcodes.js y en el init : function(ed, url) crear nuevos botones igual que lo hizo la primera, para que se viera como tal:

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

Y así sucesivamente, tantos botones como sea necesario .

Después de eso regrese a su función register_button($buttons) y actualice el array_push().

Así, mientras, cuando se tenía un solo botón para añadir que se veía así:

function register_button($buttons) { 
array_push($buttons, "quote"); 
return $buttons; } 

Ahora que ha creado nuevos botones de esta función se vería así.

function register_button($buttons) { 
array_push($buttons, "quote", "singlequote"); 
return $buttons; } 

Y así sucesivamente, dependiendo de la cantidad de botones nuevos que haya agregado.

No necesita duplicar funciones ni agregar nuevas acciones y filtros para agregar nuevos botones a su tinyMCE.

Usted acaba de crear los nuevos botones dentro de su TinyMCE plug-in y listar los nombres de los botones que usted ha creado dentro de la array_push().

Tal vez te interrumpía consciente de que array_push() acepta varios valores de empuje. Here is its documentation on php.net