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

34

¿Cómo hacer cualquier icono de complemento en la publicación de WordPress? 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:

ingrese la descripción de la imagen aquí

Salida: si hago clic en el icono, escribe automáticamente [plugin]en el contenido de la publicación de esta manera:

ingrese la descripción de la imagen aquí

Juan mentira
fuente
Agregue una captura de pantalla del resultado que desea obtener. No está claro lo que quieres.
fuxia
Creo que desea crear un complemento que agregue un botón TinyMCE al editor que inserte un código abreviado de WordPress, ¿verdad?
desarrollada el

Respuestas:

65

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

  1. Agrega nuestro botón a la barra de herramientas
  2. Registre un complemento 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'(ver más wpse72394_register_tinymce_plugin()abajo)

 // 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 especifica en los primeros pasos).

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);
});
Stephen Harris
fuente
1
En el paso 1, cambiar el initgancho por el admin_initgancho también podría ahorrar un poco de procesamiento extra en el front-end.
Tim Malone el
Depende, también puedes tener TinyMCE en el front-end. Pero sí, si esto es solo del lado del administrador, admin_initsería preferible.
Stephen Harris
5

Hay demasiado para poner la respuesta completa aquí, así que consulte esta guía: http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

Debe crear un archivo Javascript que tome medidas desde el botón que registra a través de WordPress que inserta el botón TinyMCE en el editor.

desarrollado
fuente
3
Utiliza query_posts, por lo que tal vez no sea el mejor ejemplo para vincular.
Brad Dalton