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

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:

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?

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

1 respuesta

14

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.

    
respondido por el Christine Cooper 22.07.2016 - 20:35

Lea otras preguntas en las etiquetas