Agregue el botón de código corto de cierre automático a TinyMCE en WP 4.6

Question

Agregue el botón de código corto de cierre automático a TinyMCE en WP 4.6

#1 de Christine Cooper (14 votos)

11

Estoy familiarizado con la creación de códigos cortos de cierre automático como:

// shortcode
function wpse_shortcode_example( $wpse_atts ) {

    // Attributes
    $wpse_atts = shortcode_atts(
        array(
            'foo' => 'bar',
            'width' => '100%',
            'height' => 'auto',
        ),
        $wpse_atts,
        'wpse'
    );

    // Return
    return '<embed 
             src="' . $wpse_atts['src'] . '"
             width="' . $wpse_atts['width'] . '"
             height="' . $wpse_atts['height'] . '";

}
add_shortcode( 'wpse', 'wpse_shortcode_example' );

pero me gustaría comenzar a agregarlos a TinyMCE. He realizado varias búsquedas, pero todos los resultados de la búsqueda están fechados o utilizan un enfoque que ya no se recomienda:

Cómo agregar un botón de código abreviado al editor TinyMCE ? : excelente punto de partida, pero la pregunta se creó en 2012.
Shortcodes de WordPress: una guía completa : buen artículo, pero a partir de 2012 y utiliza query_posts() pero podría ser ajustado
Guía para crear sus propios botones del editor de WordPress : es un buen artículo, pero aún así desde hace un tiempo, 2013, pero no cubre los conceptos básicos ni la base para usar TinyMCE.

Sé que el desarrollador todavía se encuentra en sus primeras etapas, pero el Manual del complemento solo habla brevemente sobre ShortCodes mejorados de TinyMCE y Shortcode API y add_shortcode() no menciona TinyMCE.

Esto me lleva a mi pregunta. ¿Cuál es el procedimiento básico para convertir un ¿Se abre automáticamente el código abreviado en un botón en el que se puede hacer clic en el editor de TinyMCE?

plugin-development tinymce shortcode

pregunta DᴀʀᴛʜVᴀᴅᴇʀ 22.07.2016 - 20:28

1 respuesta

Lea otras preguntas en las etiquetas plugin-development tinymce shortcode

WP_Query Pagination en single-custom.php Cargar el entorno mínimo de WordPress

score 14 · Accepted Answer

Comenzamos agregando el botón TinyMCE personalizado:

function add_mce_button_custom_em() {
    // check user permissions
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    // check if WYSIWYG is enabled
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'add_tinymce_plugin_custom_em' );
        add_filter( 'mce_buttons', 'register_mce_button_custom_em' );
    }
}
add_action('admin_head', 'add_mce_button_custom_em');

Luego declaramos y registramos el nuevo botón:

// Declare script for new button
function add_tinymce_plugin_custom_em( $plugin_array ) {
    $plugin_array['custom_em'] = get_template_directory_uri() .'/plug/custom-em/custom-em.js';
    return $plugin_array;
}

// Register new button in the editor
function register_mce_button_custom_em( $buttons ) {
    array_push( $buttons, 'custom_em' );
    return $buttons;
}

Finalmente, decidimos qué botones (puede encontrar más información sobre los botones en Formato de contenido ). quiere mostrar. Obviamente, si tienes UX en mente, solo mostrarías algunos de ellos, ejemplo:

// TinyMCE: TinyMCE choose which buttons you want to display
function myformatTinyMCE( $in ) {
    $in['toolbar1'] = 'styleselect,bold,custom_em,blockquote,hr,aligncenter,link,unlink,spellchecker,undo,removeformat';
    return $in;
}
add_filter( 'tiny_mce_before_init', 'myformatTinyMCE' );

Como puede ver en la función add_tinymce_plugin_custom_em , estamos declarando un archivo javascript dentro de get_template_directory_uri() .'/plug/custom-em/custom-em.js'

Así que crea el archivo custom-em.js , y luego tienes dos formas de hacerlo.

Puede ir con el siguiente formato de código abreviado [shortcode foo="" bar=""] o [shortcode][/shortcode] .

Comencemos con el formato [shortcode foo="" bar=""] :

(function() {
    tinymce.create('tinymce.plugins.custom_em', {
        init : function(ed, url) {
            ed.addButton('custom_em', {
                title : 'Custom EM',
                image : url+'/images/btn_custom_em.png',
                onclick : function() {
                    ed.execCommand(
                        "mceInsertContent",
                        false,
                        "[shortcode foo=\"\" bar=\"\"]"
                    );
                }
            });
        }
    });
    tinymce.PluginManager.add('custom_em', tinymce.plugins.custom_em);
})();

Como puede ver, usamos una imagen como icono del botón. Puede cambiar eso en texto como se describe en el siguiente ejemplo.

Lo siguiente es lo que usamos en nuestra propia plataforma, que envuelve la selección en: <em class="whatever">hello world</em> :

(function() {
    tinymce.PluginManager.add('custom_em', function( editor, url ) {

        editor.on('init', function(e) {
            this.formatter.register('thetarget', {
                inline : 'em',
                classes : 'whatever'
            });
        });

        editor.addButton('custom_em', {
            text: 'Custom EM',
            icon: false,
            onclick : function() {
                var contents = editor.selection.getContent(),
                tags = jQuery(jQuery.parseHTML(contents)).find('em.whatever').andSelf();
                editor.formatter.toggle('thetarget');
            }
        });
    });
})(jQuery);

Por favor, publique los resultados y realice las ediciones. TinyMCE es una plaga y requiere dolor de cabeza, pero se puede resolver de manera colaborativa.