Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

Boton personalizado en TYNIMCE

Estas en el tema de Boton personalizado en TYNIMCE en el foro de WordPress en Foros del Web. Buenas, estoy intentando crear un shortcode en wordpress, y añadir un boton en el tynimce, pero no soy capaz. Sigo al detalle las instrucciones de ...
  #1 (permalink)  
Antiguo 10/02/2015, 17:09
Avatar de wolfmoon  
Fecha de Ingreso: octubre-2007
Mensajes: 189
Antigüedad: 13 años
Puntos: 2
Boton personalizado en TYNIMCE

Buenas,

estoy intentando crear un shortcode en wordpress, y añadir un boton en el tynimce, pero no soy capaz.

Sigo al detalle las instrucciones de esta página (http://www.smashingmagazine.com/2012...omplete-guide/) pero lo unico que consigo es que me desaparezca todos los botones.

No soy capaz de añadir el boton al editor visual.

Necesitaria un cable, gracias.
  #2 (permalink)  
Antiguo 11/02/2015, 09:32
Avatar de TMeister
Crazy Coder
 
Fecha de Ingreso: enero-2002
Ubicación: En la Oficina
Mensajes: 2.880
Antigüedad: 18 años, 9 meses
Puntos: 193
Respuesta: Boton personalizado en TYNIMCE

Aqui te dejo mis pasos, compatibles con la ultima version de WP 4.1

Son 3 pasos

1.- Agregar el boton al menu, yo lo agrego a lado de boton de add media para mayor visibilidad



Código PHP:
Ver original
  1. function add_button(){
  2.  
  3.     echo '<a href="#" id="some-id" class="button">' . __('Button Text', 'textdomain') . '</a>';
  4.  
  5. }
  6. add_action( 'media_buttons', 'add_button' );

2.- Agregar el plugin correspondiente que es el que maneja toda la logica, es decir que se hara cuando se de click en el boton.

Código PHP:
Ver original
  1. function add_mce_plugin($plugins_array){
  2.     $plugins_array['impactfulplugin'] = plugin_dir_url( __FILE__ ) . 'js/file-mce-plugin.js';
  3.     return $plugins_array;
  4. }
  5. add_filter( 'mce_external_plugins', 'add_mce_plugin');

Finalmente el JS que controla toda la logica y que ejecuta el comando del TYNIMCE

Código Javascript:
Ver original
  1. (function($) {
  2.     /**********************************************************************
  3.     * SHORTCODE GENERATOR
  4.     **********************************************************************/
  5.     tinymce.PluginManager.add('impactfulplugin', function( ed ) {
  6.  
  7.         $('#some-id').on('click', function(event) {
  8.             //Muestra tu UI
  9.             //aka el creador del shortcode
  10.         });
  11.  
  12.         $('#button-impactful-insert').on('click', function(event) {
  13.             //este es el boton que crea el shorcode
  14.             event.preventDefault();
  15.             ed.execCommand('addImpactfulShortcode');
  16.             //Cerrar tu UI
  17.         });
  18.  
  19.         ed.addCommand('addImpactfulShortcode', function() {
  20.             var shortcode = "[shortcode_name]";
  21.             ed.execCommand('mceInsertContent', 0, shortcode);
  22.         });
  23.     });
  24. })( window.jQuery );

Etiquetas: boton, página, personalizado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:46.