Tutoriel Redactor 10 : intégrer un compteur de mots

A peine l'été terminé, l'équipe qui a créée Redactor nous propose une grosse MAJ de son éditeur WYSIWYG. Et cette fois-ci, le nombre de modifications est importante puisque le cœur du système a été revu. Et cela peut poser parfois des problèmes, notamment avec les plugins.

Un plugin pour compter les mots

Plutôt que vous ennuyer avec tous les détails, vous trouverez la liste sur le site d'Imperavi. Dans mon utilisation quotidienne de Redactor (et pour les personnes qui ont l'habitude de publier sur mes annuaires), j'utilise un plugin pour compter le nombre de mots.

Et bien ce plugin ne fonctionne plus avec la nouvelle version de Redactor dont je vous avais parlé l'année dernière. Étant donné qu'il n'a aucune valeur stratégique à mes yeux (contrairement au plugin d'upload d'image que j'ai développé et qui fait des choses extraordinaires, si si ^^), je vais le partager avec vous. C'est parti pour le tutoriel.

Dans un premier temps, nous allons créer un fichier javascript. Celui-ci va permettre d'ajouter un bouton à la barre d'outils de Redactor et d'effectuer une action lors du clic. Créez le fichier redactor.compteur.js. Comme indiqué dans la doc, on initialise le plugin :

if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.compteur = function() {
    return {    };
};

Ensuite, nous allons avoir besoin de la fonction pour créer le bouton et son appel au clic. On ajoute donc :

if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.compteur = function() {
    return {
        init: function() {
            // Ajout du bouton dans la barre d'outils de Redactor
            var button = this.button.add('compteur', 'Compteur de mots');
            // Action sur le bouton
            this.button.addCallback(button, this.compteur.bouton);
        }
    };
};

En l'état, vous devriez voir le bouton mais aucune action n'est possible. Il faut donc ajouter la fonction qui permettra d'afficher une alerte suite au clic. Dans cet exemple, nous souhaitons afficher le nombre de mots contenus dans l'éditeur de texte :

if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.compteur = function() {
    return {
        init: function() {
            // Ajout du bouton dans la barre d'outils de Redactor
            var button = this.button.add('compteur', 'Compteur de mots');
            // Action sur le bouton
            this.button.addCallback(button, this.compteur.bouton);
        },
        
        bouton: function() {
            // Affichage d'une alerte au clic du bouton
            alert('Votre texte contient '+ this.compteur.count() +' mots.');
        }
    };
};

Là encore, on a bien avancé mais cela ne suffit pas. Nous avons besoin d'une dernière fonction pour compter le nombre de mots. La voici donc :

if (!RedactorPlugins) var RedactorPlugins = {};
RedactorPlugins.compteur = function() {
    return {
        init: function() {
            // Ajout du bouton dans la barre d'outils de Redactor
            var button = this.button.add('compteur', 'Compteur de mots');
            // Action sur le bouton
            this.button.addCallback(button, this.compteur.bouton);
        },
        
       bouton: function() {
            // Affichage d'une alerte au clic du bouton
            alert('Votre texte contient '+ this.compteur.count() +' mots.');
        },
        count: function() {
            // Extraction du contenu de l'editeur 
            var html = this.code.get();
            // Suppression du code HTML et des retours a la ligne
            text = $(html).text().replace(/t+/g, " ").replace(/n/g, " ").replace(/s+/g, " ");
            // Affichage du decompte
            return text.split(' ').length - 1;
        }
    };
};

Le plugin est désormais fonctionnel, nous avons besoin maintenant de l'appeler. Dans votre fonction appelant Redactor, ajoutez les lignes suivantes :

<script type="text/javascript">
$(document).ready(function() {
    $('#texte').redactor({
        plugins: ['compteur']    });
});
</script>

Avouez que ce n'est pas sorcier lorsque que l'on vous donne la solution. :-)

Il reste une toute petite chose à faire (mais vous êtes grands hein ^^), c'est de créer les boutons de compteur (normal et hover de 14px) puis de les appeler via une feuille de style (différente de celle de Redactor) comme ceci (pensez à appeler la feuille de styles dans la balise head) :

.redactor-toolbar li a.re-compteur {
    background: url(../images/picto-count.png) no-repeat center
}.redactor-toolbar li a.re-compteur:hover {
    background: #1f78d8 url(../images/picto-count-hover.png) no-repeat center;
    outline: none
}

Avec ce petit tutoriel, vous pourrez désormais vérifier le nombre de mots présents dans votre zone de texte et obtenir le message suivant :