Configuration de base de TinyMCE

Parmi les éditeurs RTE gratuits, TinyMCE est reconnu pour pouvoir s'installer en utilisant seulement deux lignes de code :

tinyMCE.init({
mode : "textareas",
theme : "simple"
});

Évidemment, il faudra préalablement inclure le script js/tiny_mce/tiny_mce.js pour que ça fonctionne (pour plus d'information, suivre le guide d'installation de TinyMCE). Cet appel perment de convertir toutes les balises <textarea> de la page en éditeur de texte riche WYSIWYG (c'est plutôt drôle, si on veut franciser ce terme, l'Office québécois de la langue française propose le terme tel-tel...). Le thème spécifié permet d'obtenir la barre d'outils la plus minimaliste possible, qui comprend les boutons gras, italique, souligné, barré, annuler (undo), refaire (redo) ainsi que les listes. Ce qui me frappe dans cette version, c'est que les boutons sont positionnés au bas de la boîte d'édition et qu'ils sont centrés, contrairement au modèle plus ergonomique auquel on a été habitué dans tout éditeur de texte (je pense à Word ou OpenOffice). Ce qui force automatiquement le programmeur à utiliser les moyens avancés pour pouvoir personnaliser l'affichage.

La première modification qu'on fera sera de changer le mode pour "exact" afin de pouvoir spécifier les ID des textareas à convertir plutôt que de l'appliquer à tous. On utilisera la clé "elements" pour spécifier la liste en prenant soin de les séparer par une virgule.

tinyMCE.init({
mode : "exact",
theme : "simple",
elements : "description,notes"
});

Pour pouvoir le personnaliser, il sera nécessaire de passer du thème "simple" à "advanced". L'éditeur avancé contient plusieurs boutons supplémentaires qui s'ajouteront automatiquement. De façon optionnelle, chaque bouton peut être ajouté, retiré ou déplacé sur chaque ligne de la barre d'outils. Pour le moment, on se contentera de déplacer les boutons au haut du contrôle et on les alignera à gauche :

tinyMCE.init({
mode : "exact",
theme : "advanced",
elements : "description,notes"
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
});

Optionnellement, on pourra indiquer la hauteur et la largeur du contrôle :

tinyMCE.init({
mode : "exact",
theme : "advanced",
elements : "description,notes"
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
height:"300px",
width:"500px"
});

Jusqu'à maintenant, on a un RTE configuré et fonctionnel mais si vous remarquez bien, l'interface est par défaut en anglais (liste de format, tooltip). Heureusement, la langue est configurable mais pas "built-in" alors on devra faire un téléchargement supplémentaire pour y arriver. Dans la liste des language pack pour TinyMCE, cochez la langue désirée et cliquez sur le bouton "Download" au bas de la page. Le fichier compressé contiendra la même arborescence que dans le répertoire d'installation (dossiers: langs, plugins et themes). Il suffit de prendre chacun des fichiers et de les ajouter aux bons répertoires (un "drag and drop" de chaque dossier devrait suffire à les ajouter). Dans mon cas, je choisirai la langue française.

On terminera l'initialisation en spécifiant la langue à l'aide du code ISO de deux lettres qui peut se trouver dans la liste des codes de langues de Wikipedia ou plus spécifiquement en utilisant le nom du fichier (sans extension) qui se trouve dans le répertoire "langs". Pour le français, le fichier fr.js permet de savoir que le code sera "fr".

tinyMCE.init({
mode : "exact",
theme : "advanced",
elements : "description,notes"
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
height:"300px",
width:"500px",
language : "fr"
});

Maintenant, à votre tour de vous amuser à découvrir les multiples fonctionnalités de TinyMCE. Beaucoup d'autres options de configuration sont possibles et plusieurs extensions sont disponibles (dont un spellchecker, émoticons, édition plein écran, etc).