Ajouter un bouton de raccourci à fermeture automatique à TinyMCE dans WP 4.6

11

Je connais bien la création de codes abrégés à fermeture automatique, tels que:

// 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' );

mais je voudrais commencer à les ajouter à TinyMCE. J'ai effectué plusieurs recherches, mais tous les résultats de recherche sont périmés ou utilisent une approche qui n'est plus recommandée:

Je sais que Developer en est encore à ses débuts, mais le manuel des plugins ne parle que brièvement de Shortcodes améliorés de TinyMCE. et API Shortcode et add_shortcode() ne mentionnez pas TinyMCE.

Cela m’amène donc à ma question. Quelle est la procédure de base pour transformer un shortcode à fermeture automatique en un bouton cliquable dans l'éditeur TinyMCE?

    
posée DᴀʀᴛʜVᴀᴅᴇʀ 22.07.2016 - 20:28

1 réponse

14

Nous commençons par ajouter le bouton personnalisé TinyMCE:

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');

Ensuite, nous déclarons et enregistrons le nouveau bouton:

// 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;
}

Enfin, nous décidons quels boutons (pour en savoir plus sur les boutons, reportez-vous à la Formatage du contenu ). vouloir afficher. Évidemment, si vous avez l’esprit UX en tête, vous n’en afficherez que quelques-uns, par exemple:

// 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' );

Comme vous pouvez le voir dans la fonction add_tinymce_plugin_custom_em , nous déclarons un fichier javascript dans get_template_directory_uri() .'/plug/custom-em/custom-em.js'

Créez donc le fichier custom-em.js , et vous aurez alors deux façons de procéder.

Soit vous pouvez utiliser le format de code abrégé suivant [shortcode foo="" bar=""] ou [shortcode][/shortcode] .

Commençons par le format [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);
})(); 

Comme vous pouvez le constater, nous utilisons une image comme icône du bouton. Vous pouvez changer cela en texte comme indiqué dans l'exemple ci-dessous.

Ce qui suit est ce que nous utilisons sur notre propre plate-forme, il enveloppe la sélection dans: <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);

Veuillez publier les résultats et effectuer des modifications. TinyMCE est un fléau qui nécessite des maux de tête, mais qui peut être résolu de manière collaborative.

    
réponse donnée Christine Cooper 22.07.2016 - 20:35

Lire d'autres questions sur les étiquettes