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

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 búsqueda están fechados o utilizan un enfoque que ya no se recomienda:

• ¿Cómo agregar un botón de código corto al editor TinyMCE? : excelente punto de partida, pero la pregunta se creó en 2012.
• Códigos abreviados de WordPress: una guía completa : buen artículo pero de 2012 y usa query_posts()pero podría modificarse
• Guía para crear sus propios botones del editor de WordPress : es un buen artículo pero aún de hace un tiempo, 2013, pero no cubre los conceptos básicos o la base para usar TinyMCE.

Sé que el desarrollador aún se encuentra en sus primeras etapas, pero el Manual de complementos solo habla brevemente sobre TinyMCE Enhanced Shortcodes y Shortcode API y add_shortcode()no menciona TinyMCE.

Entonces esto me lleva a mi pregunta. ¿Cuál es el procedimiento básico para convertir un shortcode de cierre automático en un botón en el que se puede hacer clic en el editor TinyMCE?

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 (se pueden encontrar más sobre los botones en Formateo de contenido ) que queremos mostrar. Obviamente, si tienes UX en mente, solo mostrarías algunos de ellos, por 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 add_tinymce_plugin_custom_emfunción, estamos declarando un archivo javascript dentroget_template_directory_uri() .'/plug/custom-em/custom-em.js'

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

Puedes ir con el siguiente formato de shortcode [shortcode foo="" bar=""]o [shortcode][/shortcode].

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

(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 ejemplo a continuación.

Lo siguiente es lo que usamos en nuestra propia plataforma, 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 resultados y realice ediciones. TinyMCE es una plaga y requiere dolor de cabeza, pero puede resolverse de manera colaborativa.