Ajouter TinyMCE au customizer WordPress

Le customizer permet de créer nativement, depuis la 4.0, un contrôle “zone de texte” (textarea), mais cela peut être rapidement limité si on veut pouvoir ajouter un peu de mise en forme, comme du gras, des liens, centrer du texte, etc.

Heureusement, il est possible de créer ses propres contrôles en étendant la classe par défaut qui permet de les générer, et c’est de cette façon que je vais vous montrer comment faire pour créer un contrôle qui affichera l’éditeur TinyMCE. Cet article suppose que vous avez déjà des notions sur l’utilisation de l’outil de personnalisation de WordPress d’un point de vue développeur.

Voici le code de la première partie, qui devra se trouver dans le fichier où vous gérez votre configuration du customizer (par exemple sur mon thème, j’appelle /inc/customizer.php depuis le functions.php).

class Text_Editor_Custom_Control extends WP_Customize_Control
{
    public $type = 'textarea';
    /**
    ** Render the content on the theme customizer page
    */
    public function render_content() { ?>
        <label>
          <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
          <?php
            $settings = array(
              'media_buttons' => false,
              'quicktags' => false
              );
            $this->filter_editor_setting_link();
            wp_editor($this->value(), $this->id, $settings );
          ?>
        </label>
    <?php
        do_action('admin_footer');
        do_action('admin_print_footer_scripts');
    }

    private function filter_editor_setting_link() {
        add_filter( 'the_editor', function( $output ) { return preg_replace( '/<textarea/', '<textarea ' . $this->get_link(), $output, 1 ); } );
    }
}

function editor_customizer_script() {
    wp_enqueue_script( 'wp-editor-customizer', get_template_directory_uri() . '/js/customizer-panel.js', array( 'jquery' ), rand(), true );
}
add_action( 'customize_controls_enqueue_scripts', 'editor_customizer_script' );

gistfile1.phtml affichage brut

Tout d’abord, il est nécessaire de créer la classe qui va étendre WP_Customize_Control, afin de créer notre contrôle personnalisé. On définit le type de ce contrôle en textarea, et on surcharge la méthode render_content() pour personnaliser l’affichage.

La fonction nécessaire pour afficher l’éditeur TinyMCE est wp_editor(), qui prend 3 arguments :

le contenu par défaut de l’éditeur (ici on récupère la valeur du champ si elle existe déjà)
un id (celui définit lors de la création du contrôle)
un tableau de réglages (ex. ici : je n’affichage pas le bouton pour l’ajout de médias, et je supprimer l’affichage de l’onglet texte)

Afin de bien initialiser TinyMCE, et donc d’avoir tous les boutons qui fonctionnent, il est nécessaire de faire un appel aux actions admin_footer et admin_print_footer_scripts, ce qui n’est pas le cas par défaut lorsqu’on est sur la page de personnalisation.

En supplément, vous pouvez constater que je modifie le contenu de the_editor, qui est le filtre contenant le html qui entoure l’éditeur. En effet pour bien fonctionner, il est nécessaire que le contrôle ait l’attribut data-customize-setting-link définit, ce qui se fait grâce à la méthode get_link().

Enfin, nous ajoutons un javascript perso à la page de personnalisation, qui permettra de transmettre l’information que le contenu du champ lié a été modifié, et donc que le bouton de publication (grisé tant qu’il n’y a pas eu de changement) doit se mettre à jour.

Ci-dessous le contenu du fichier javascript

( function( $ ) {
    wp.customizerCtrlEditor = {

        init: function() {

            $(window).load(function(){

                $('textarea.wp-editor-area').each(function(){
                    var tArea = $(this),
                        id = tArea.attr('id'),
                        editor = tinyMCE.get(id),
                        setChange,
                        content;

                    if(editor){
                        editor.onChange.add(function (ed, e) {
                            ed.save();
                            content = editor.getContent();
                            clearTimeout(setChange);
                            setChange = setTimeout(function(){
                                tArea.val(content).trigger('change');
                            },500);
                        });
                    }

                    tArea.css({
                        visibility: 'visible'
                    }).on('keyup', function(){
                        content = tArea.val();
                        clearTimeout(setChange);
                        setChange = setTimeout(function(){
                            content.trigger('change');
                        },500);
                    });
                });
            });
        }

    };

    wp.customizerCtrlEditor.init();

} )( jQuery );

gistfile1.js affichage brut

Pour finir, il faut créer le réglage et le contrôle, pour l’affichage de celui-ci dans la personnalisation.

function register_theme_customizer() {
        $wp_customize->add_section( 'editor', array(
            'title' => 'Editeur',
            'description' => 'Editeur TinyMCE',
            'priority' => 300
        ) );

        $wp_customize->add_setting( 'theme[editor_content]', array(
            'default' => '',
            'transport' => 'postMessage',
            'sanitize_callback' => 'wp_kses_post'
        ) );

        $wp_customize->add_control( new Text_Editor_Custom_Control( $wp_customize, 'editor_content', array(
            'label' => 'Contenu',
            'section' => 'editor',
            'settings' => 'cornettes[editor_content]',
            'type' => 'textarea'
        ) ) );
}
add_action ( 'customize_register', 'register_theme_customizer' );

gistfile1.php affichage brut

Nous avons une fonction pour se greffer sur l’action customize_register, dans laquelle nous créons une section, un réglage et un contrôle. Deux choses à noter :

Le réglage utilise la fonction wp_kses_post() pour la sécurisation du contenu du champ.
Le contrôle fait appel à notre classe créée précédemment, pour utiliser le contrôle personnalisé qui affichera l’éditeur TinyMCE.

Voici une capture d’écran du résultat sur le site où j’en ai eu besoin :

Il reste bien entendu à gérer l’affichage en front là où vous le souhaitez.

J’espère que cela pourra vous être utile dans vos futurs développements où vous avez besoin de proposer une solution plus avancée qu’une simple zone de texte.

Ajouter l’éditeur de texte TinyMCE au customizer

Laisser un commentaire