L’une de mes mises à jour préférées dans WordPress 3.9 était la création du noyau de la version 4.0 de TinyMCE. Le nouveau TinyMCE a un look plus propre (correspond vraiment au tableau de bord WP) et il a de très belles fonctionnalités supplémentaires. Beaucoup de mes anciens thèmes et plugins ont dû être mis à jour pour fonctionner avec le nouveau TinyMCE, j’ai donc passé du temps à fouiller. l’API et trouver des trucs sympas. Ci-dessous, je vais vous donner quelques exemples sur la façon dont vous pouvez étendre les fonctionnalités de TinyMCE. Je ne vais pas vous expliquer toutes les étapes ou ce que le code signifie exactement (ceci est destiné aux développeurs) mais je vous fournirai le code exact que vous pouvez copier / coller dans votre thème ou plugin, puis ajuster en conséquence.

Ajout de sélections de taille de police et de familles de polices

Par défaut, les polices personnalisées et les tailles de police ne sont pas ajoutées dans l’éditeur TinyMCE. La fonction ci-dessous ajoutera ces deux listes déroulantes à l’extrême gauche de l’éditeur dans la deuxième ligne. Changez simplement l’endroit où il est dit «mce_buttons_2» si vous le souhaitez dans une ligne différente (ex: utilisez «mce_buttons_3» pour la 3e ligne).

// Enable font size & font family selects in the editor
if ( ! function_exists( 'wpex_mce_buttons' ) ) {
    function wpex_mce_buttons( $buttons ) {
        array_unshift( $buttons, 'fontselect' ); // Add Font Select
        array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
        return $buttons;
    }
}
add_filter( 'mce_buttons_2', 'wpex_mce_buttons' );

Ajout de tailles de police personnalisées

Par défaut, les tailles de police sont définies sur des valeurs pt, ce qui n’est pas toujours idéal. Je préfère utiliser des valeurs de pixels (12px, 13px, 14px, 16px..etc) et fournir plus d’options pour la flexibilité de la râpe. La fonction ci-dessous modifiera les options de taille de police par défaut dans le sélecteur déroulant.

// Customize mce editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
    function wpex_mce_text_sizes( $initArray ){
        $initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
        return $initArray;
    }
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );

Ajout de polices personnalisées

Les options de police par défaut dans le sélecteur de famille de polices sont toutes des polices «Web-safe» par défaut, mais que faire si vous souhaitez ajouter plus de polices au sélecteur? Peut-être des polices Google? Nous allons c’est vraiment facile de regarder l’exemple ci-dessous.

// Add custom Fonts to the Fonts list
if ( ! function_exists( 'wpex_mce_google_fonts_array' ) ) {
    function wpex_mce_google_fonts_array( $initArray ) {
        $initArray['font_formats'] = 'Lato=Lato;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
            return $initArray;
    }
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_google_fonts_array' );

Remarquez comment j’ai ajouté «Lato» à la liste dans le code ci-dessus? C’est si simple! Dans mon thème Total WordPress, je boucle en fait toutes les polices personnalisées utilisées sur le site telles que définies dans le panneau de thème et les ajoute à la zone de sélection afin qu’elles soient également disponibles lors de l’édition de vos articles / pages (doux). Mais le code annonce UNIQUEMENT la famille de polices dans la liste déroulante, il ne chargera pas comme par magie le script de sorte que lorsque vous modifiez votre texte dans l’éditeur, vous puissiez réellement voir cette police personnalisée qui lui est appliquée … C’est ce que fait le code ci-dessous!

// Add Google Scripts for use with the editor
if ( ! function_exists( 'wpex_mce_google_fonts_styles' ) ) {
    function wpex_mce_google_fonts_styles() {
       $font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400,700';
           add_editor_style( str_replace( ',', '%2C', $font_url ) );
    }
}
add_action( 'init', 'wpex_mce_google_fonts_styles' );

Activer le menu déroulant Formats (styles) et ajouter de nouveaux styles

Vous vous souvenez de la liste déroulante «Styles» dans WP 3.8? C’était plutôt cool! Vous pouvez l’utiliser pour ajouter des classes intéressantes à utiliser dans l’éditeur de publication (je l’utilise sur Themelocal en fait pour les boutons, les travées colorées, les boîtes, etc.). Nous allons dans WP 3.9, vous pouvez toujours ajouter des styles, cependant, il a été renommé dans le nouveau TinyMCE 4.0 en «Formats», donc cela fonctionne un peu différemment. Vous trouverez ci-dessous un exemple de la façon d’activer la liste déroulante Formats et d’y ajouter de nouveaux éléments.

Activer le menu déroulant Formats

Cela se fait en fait de la même manière avant WP 3.9 mais je partage au cas où vous ne saviez pas comment le faire.

// Add Formats Dropdown Menu To MCE
if ( ! function_exists( 'wpex_style_select' ) ) {
    function wpex_style_select( $buttons ) {
        array_push( $buttons, 'styleselect' );
        return $buttons;
    }
}
add_filter( 'mce_buttons', 'wpex_style_select' );

Ajouter de nouveaux éléments aux formats

L’ajout de nouveaux éléments est très simple. Veuillez noter comment j’ai ajouté “$ settings[‘style_formats_merge’] = vrai; » au code ci-dessous, cela garantit que vos modifications sont ajoutées au menu déroulant des formats avec toutes les autres – n’écrasez pas le tout (peut-être que d’autres plugins voudront également l’utiliser).

// Add new styles to the TinyMCE "formats" menu dropdown
if ( ! function_exists( 'wpex_styles_dropdown' ) ) {
    function wpex_styles_dropdown( $settings ) {

        // Create array of new styles
        $new_styles = array(
            array(
                'title' => __( 'Custom Styles', 'wpex' ),
                'items' => array(
                    array(
                        'title'     => __('Theme Button','wpex'),
                        'selector'  => 'a',
                        'classes'   => 'theme-button'
                    ),
                    array(
                        'title'     => __('Highlight','wpex'),
                        'inline'    => 'span',
                        'classes'   => 'text-highlight',
                    ),
                ),
            ),
        );

        // Merge old & new styles
        $settings['style_formats_merge'] = true;

        // Add new styles
        $settings['style_formats'] = json_encode( $new_styles );

        // Return New Settings
        return $settings;

    }
}
add_filter( 'tiny_mce_before_init', 'wpex_styles_dropdown' );

Ajout d’un bouton MCE simple

L’ajout d’un nouveau bouton à l’éditeur TinyMCE est particulièrement utile pour les codes courts, car en tant qu’utilisateur, vous n’avez pas à vous souvenir de codes courts, vous pouvez simplement cliquer sur un bouton et il l’insère. Je ne dis pas d’ajouter des centaines de boutons au TinyMCE pour tous vos codes courts (je déteste quand les développeurs font ça, c’est une si mauvaise pratique et ça a l’air horrible) mais si vous en ajoutez 1 ou quelques-uns, je le laisserai passer 😉 Si vous souhaitez ajouter un groupe, vous devez créer un sous-menu comme expliqué dans la section qui suit.

Nouveau bouton WordPress MCE

Code PHP – Déclarez le nouveau plugin MCE dans WP

Ce code déclarera votre nouveau plugin MCE, assurez-vous de changer l’emplacement du fichier javascript «mce-button.js» pour qu’il corresponde à l’emplacement de votre fichier (pour lequel je vous donnerai également le code dans la sous-section suivante) comme évidemment renommer le préfixe «mon» en quelque chose de plus unique!

// Hooks your functions into the correct filters
function my_add_mce_button() {
    // 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', 'my_add_tinymce_plugin' );
        add_filter( 'mce_buttons', 'my_register_mce_button' );
    }
}
add_action('admin_head', 'my_add_mce_button');

// Declare script for new button
function my_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js';
    return $plugin_array;
}

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

Code JS – Ajouter le bouton au MCE

Ce code js va dans le fichier js enregistré dans l’extrait ci-dessus dans la fonction «symple_shortcodes_add_tinymce_plugin». Cela devrait ajouter un nouveau bouton de texte qui dit “Nouveau bouton” dans votre éditeur et lorsque vous cliquez dessus, il insérera le texte “Themelocal.com est génial!” (bien sûr).

(function() {
    tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
        editor.addButton('my_mce_button', {
            text: 'New Button',
            icon: false,
            onclick: function() {
                editor.insertContent('Themelocal.com is awesome!');
            }
        });
    });
})();

Ajouter une icône personnalisée à votre nouveau bouton MCE

Ci-dessus, je vous ai montré comment ajouter un nouveau bouton qui s’affichera en tant que “Nouveau bouton” dans l’éditeur, c’est un peu boiteux… Donc le code modifié vous montrera comment ajouter votre propre icône personnalisée.

Chargez une feuille de style avec votre CSS

Utilisez cette fonction pour charger une nouvelle feuille de style à utiliser dans votre panneau d’administration – certains plugins / thèmes peuvent déjà ajouter une feuille de style, donc si votre thème / plugin le fait, ignorez cela et ajoutez simplement votre CSS personnalisé et ajustez les js (voir ci-dessous) .

function my_shortcodes_mce_css() {
    wp_enqueue_style('symple_shortcodes-tc', plugins_url('/css/my-mce-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_shortcodes_mce_css' );

Votre CSS personnalisé

C’est le CSS pour ajouter la feuille de style chargée précédemment.

i.my-mce-icon {
    background-image: url('YOUR ICON URL');
}

Ajustez votre Javascript

Maintenant, modifiez simplement le javascript que vous avez ajouté précédemment pour supprimer le paramètre de texte et au lieu de définir l’icône sur false, donnez-lui un nom de classe personnalisé.

(function() {
    tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
        editor.addButton( 'my_mce_button', {
            icon: 'my-mce-icon',
            onclick: function() {
                editor.insertContent('Themelocal.com is awesome!');
            }
        });
    });
})();

Ajout d’un bouton avec un sous-menu

Sous-menu du bouton MCE

Plus tôt, j’ai mentionné que l’ajout d’une tonne de nouvelles icônes à la barre TinyMCE est une mauvaise idée (et c’est le cas), alors consultez le code ci-dessous pour voir comment vous pouvez modifier le javascript pour afficher un sous-menu pour votre bouton personnalisé. Si vous voulez le voir en action, consultez mon Vidéo sur les codes courts Symple.

(function() {
    tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
        editor.addButton( 'my_mce_button', {
            text: 'Sample Dropdown',
            icon: false,
            type: 'menubutton',
            menu: [
                {
                    text: 'Item 1',
                    menu: [
                        {
                            text: 'Sub Item 1',
                            onclick: function() {
                                editor.insertContent('Themelocal.com is awesome!');
                            }
                        },
                        {
                            text: 'Sub Item 2',
                            onclick: function() {
                                editor.insertContent('Themelocal.com is awesome!');
                            }
                        }
                    ]
                },
                {
                    text: 'Item 2',
                    menu: [
                        {
                            text: 'Sub Item 1',
                            onclick: function() {
                                editor.insertContent('Themelocal.com is awesome!');
                            }
                        },
                        {
                            text: 'Sub Item 2',
                            onclick: function() {
                                editor.insertContent('Themelocal.com is awesome!');
                            }
                        }
                    ]
                }
            ]
        });
    });
})();

Ajout d’une fenêtre contextuelle à votre bouton au clic

Dans l’exemple ci-dessus, vous remarquerez peut-être que chaque bouton insère simplement le texte “Themelocal.com est génial!” ce qui est cool, mais qu’en est-il de la création d’une fenêtre pop-up où un utilisateur peut modifier ce qui est inséré dans le texte? Alors ça ce serait gentil! Et c’est quelque chose que j’ai ajouté à la version 1.6 de mes codes courts Symple, ce qui rend le plugin beaucoup plus convivial.

Fenêtre contextuelle WordPress MCE

(function() {
    tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
        editor.addButton( 'my_mce_button', {
            text: 'Sample Dropdown',
            icon: false,
            type: 'menubutton',
            menu: [
                {
                    text: 'Item 1',
                    menu: [
                        {
                            text: 'Pop-Up',
                            onclick: function() {
                                editor.windowManager.open( {
                                    title: 'Insert Random Shortcode',
                                    body: [
                                        {
                                            type: 'textbox',
                                            name: 'textboxName',
                                            label: 'Text Box',
                                            value: '30'
                                        },
                                        {
                                            type: 'textbox',
                                            name: 'multilineName',
                                            label: 'Multiline Text Box',
                                            value: 'You can say a lot of stuff in here',
                                            multiline: true,
                                            minWidth: 300,
                                            minHeight: 100
                                        },
                                        {
                                            type: 'listbox',
                                            name: 'listboxName',
                                            label: 'List Box',
                                            'values': [
                                                {text: 'Option 1', value: '1'},
                                                {text: 'Option 2', value: '2'},
                                                {text: 'Option 3', value: '3'}
                                            ]
                                        }
                                    ],
                                    onsubmit: function( e ) {
                                        editor.insertContent( '[random_shortcode textbox="' + e.data.textboxName + '" multiline="' + e.data.multilineName + '" listbox="' + e.data.listboxName + '"]');
                                    }
                                });
                            }
                        }
                    ]
                }
            ]
        });
    });
})();

C’est cool… Et maintenant?

Bonne question! Il est maintenant temps pour vous de prendre ces superbes réglages et de créer quelque chose d’épique ou de mettre à jour vos plugins / thèmes pour qu’ils soient compatibles avec le nouveau TinyMCE dans WordPress 3.9. Faites-moi savoir ce que vous proposez dans les commentaires ci-dessous!

Share: