¿Cómo agregar un botón de código abreviado al editor TinyMCE?

34

¿Cómo hacer que cualquier icono de plugin en WordPress publique? El código que quiero insertar en el código del complemento y aparecerá en la barra de publicación [wp-admin / post.php].

Me gusta esta imagen:

Salida:sihagoclicenelícono,automáticamenteescribe[plugin]enelcontenidodelapublicacióndeestamanera:

    
pregunta Juan Lie 13.11.2012 - 04:21

2 respuestas

63

Para agregar nuestro botón al editor TinyMCE necesitamos hacer varias cosas:

  1. Agregue nuestro botón a la barra de herramientas
  2. Registrar un complemento de TinyMCE
  3. Cree ese complemento TinyMCE que le dice a TinyMCE qué hacer cuando se hace clic en nuestro botón.

Pasos # 1 y # 2

En estos pasos, registramos nuestro complemento TinyMCE que vivirá dentro de un archivo javascript en 'path/to/shortcode.js' (vea wpse72394_register_tinymce_plugin() a continuación)

 // init process for registering our button
 add_action('init', 'wpse72394_shortcode_button_init');
 function wpse72394_shortcode_button_init() {

      //Abort early if the user will never see TinyMCE
      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
           return;

      //Add a callback to regiser our tinymce plugin   
      add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); 

      // Add a callback to add our button to the TinyMCE toolbar
      add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}


//This callback registers our plug-in
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpse72394_button'] = 'path/to/shortcode.js';
    return $plugin_array;
}

//This callback adds our button to the toolbar
function wpse72394_add_tinymce_button($buttons) {
            //Add the button ID to the $button array
    $buttons[] = "wpse72394_button";
    return $buttons;
}

Paso # 3

Ahora necesitamos crear nuestro complemento TinyMCE. Esto irá en un archivo 'path/to/shortcode.js' (como se especificó en los pasos iniciales).

jQuery(document).ready(function($) {

    tinymce.create('tinymce.plugins.wpse72394_plugin', {
        init : function(ed, url) {
                // Register command for when button is clicked
                ed.addCommand('wpse72394_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if( selected ){
                        //If text is selected when button is clicked
                        //Wrap shortcode around it.
                        content =  '[shortcode]'+selected+'[/shortcode]';
                    }else{
                        content =  '[shortcode]';
                    }

                    tinymce.execCommand('mceInsertContent', false, content);
                });

            // Register buttons - trigger above command when clicked
            ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' });
        },   
    });

    // Register our TinyMCE plugin
    // first parameter is the button ID1
    // second parameter must match the first parameter of the tinymce.create() function above
    tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});
    
respondido por el Stephen Harris 13.11.2012 - 18:24
5

Hay mucho para poner la respuesta completa aquí, así que consulte esta guía: enlace

Tienes que crear un archivo Javascript que tome acción desde el botón que registras a través de WordPress que inserta el botón TinyMCE en el editor.

    
respondido por el developdaly 13.11.2012 - 05:44

Lea otras preguntas en las etiquetas