< DevAfrique />

Cet article montre comment ajouter un éditeur WYSIWYG (What You See Is What You Get) aux formulaires de votre site Web. Ainsi les usagers de votre site pourront facilement formater leurs textes sans pour autant avoir des notions de HTML.

Plusieurs approches sont possibles pour offrir une telle fonctionnalité. Parmi celles-ci figurent l'utilisation des balises HTML et le support du BBCode (Popularisé par les formulaires PHPBB). Bien que permettant la même finalité, ces techniques ne donnent pas à l'utilisateur la même flexibilité que les éditeurs WYSIWYG. Dans les deux cas, l'utilisateur doit avoir une connaissance préalable du langage HTML ou du BBCode.

Bien qu'il existe de nombreux éditeurs WYSIWYG (gratuits comme payants), nous allons dans notre exemple utilisé  FCKeditor (nommé en fonction du nom que porte son créateur Frederico Caldeira Knabben). Le choix s'est porté vers cet éditeur non seulement parce qu'il est gratuit, mais également parce qu'il a plein de fonctionnalités et est facilement configurable offrant ainsi donc une grande flexibilité aux développeurs que nous sommes. Parmi ces avantages on peut citer la compatibilité à travers une large gamme de navigateurs Web, l'insertion d'images avec la possibilité de transférer des fichiers sur le serveur, la possibilité de configurer la barre de menu, l'intégration avec de nombreux langages de programmtion, etc.

• Télécharger la dernière version stable (2.5.1 lors de l'écriture de cet article) depuis le site officiel à l'adresse http://www.fckeditor.net/download
  
• Extraire l'archive téléchargée dans le répertoire racine de votre site web.

Dans le répertoire fckeditor se trouve le fichier Javascript fckconfig.js. Nous allons modifier ce fichier dans le but d'y ajouter une barre d'outils avec les boutons que nous souhaitons.

Note: Par défaut FCKeditor dispose de 2 barre d'outils (Default et Basic) et rien n'empêche d'utiliser directement l'une d'entre elles. L'objectif ici est de montrer comment créer une barre d'outils selon vos besoins.

Le code javascript ci-dessous sera utilisé pour ajouter une nouvelle barre d'outils. Placez ce code dans le fichier fckconfig.js après les autres barres d'outils (Default et Basic). La nouvelle barre d'outils créée dans cet article est nommée Exemple. Ce identifiant sera utilisé dans notre code PHP lors de la configuration de l'éditeur.

FCKConfig.ToolbarSets["Exemple"] = [        ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','Smiley']
] ;

PHP 5 étant le langage choisi pour l'exemple dans cet article, nous allons donc inclure le fichier fckeditor_php5.php (situé dans le repertoire fckeditor) dans notre script. Ce fichier contient une classe qui permet de manipuler les options de l'éditeur en PHP puis d'afficher le code HTML correspondant grâce à la méthode CreateHtml. Commençons pas créer un fichier helper.inc.php contenant une fonction WYSIWYG qui aura la responsabilité de configurer notre éditeur WYSIWYG.

1. <?php
2.  
3. require_once 'fckeditor/fckeditor_php5.php' ;
4.  
5. function wysiwyg ($identifiant = '', $contenu = '')
6. {
7. $editeur = new FCKeditor ($identifiant) ;
8. $editeur->BasePath = 'fckeditor/' ;
9. $editeur->ToolbarSet = 'Exemple' ;
10. $editeur->Value = $contenu ;
11.  
12. return $editeur->CreateHtml () ;
13. }
14.  
15. ?>

Remarque: Dans le version 2.5.1, l'inclusion du script fckeditor_php5.php causait une erreur due à l'appel d'une fonction introuvable. Une recherche rapide sur Internet n'a rien donné alors j'ai contourné ce problème en remplacant la ligne 105 du fichier par return 1;

La fonction est assez courte simple à comprendre. On fait appel à cette fonction depuis l'endroit où l'on aimerait afficher l'éditeur. La fonction reçoit 2 arguments qui sont le nom de l'éditeur dans le formulaire et le contenu que l'on aimerait y voir (si disponible). Après avoir créer une instance de la classe FCKeditor, on procède à sa configuration en fournissant le chemin relatif vers le code de l'éditeur. Par la suite le nom de la barre d'outils à utiliser est précisé via la propriété ToolbarSet puis le contenu à afficher par le biais de la propriété Value. Comme mentionné ci-dessus, l'appel à la fonction CreateHtml retourne le code HTML nécessaire à l'affichage de l'éditeur. C'est le texte retourné par CreateHtml (au format HTML) que nous affichons dans notre page. Notez l'utilisation de 

<?= wysiwyg ('le_texte', $contenu) ; ?>

qui n'est en réalité qu'une autre manière d'écrire

<?php print wysiwyg ('le_texte', $contenu) ; ?>.  

1. <div id="formulaire">
2. <form name="fckeditor" method="post" action="" >
3. <?= wysiwyg ('le_texte', $contenu) ; ?>
4. <p>
5. <input type="submit" name="soumettre" value="Previsualiser" />
6. </p>
7. </form>
8. </div>

Le code ci-dessus montre comment utiliser notre fonction WYSIWYG pour créer un éditeur nommé le_texte. Lorsque la page sera affiché, l'éditeur contiendra ce qui se trouve dans la variable $contenu. Dans cet exemple, le formulaire est soumis à la même page(via la méthode POST) ce qui fait que nous allons utiliser le script ci-dessous pour récupérer ce que l'utilisateur a entré dans l'éditeur dans le but de l'afficher au sein de la page et également dans l'éditeur permettant ainsi à l'utilisateur de continuer son travail au besoin.

1. <?php
2.  
3. require_once "helper.inc.php" ;
4.  
5. $contenu = "" ;
6. if (isset($_POST['soumettre']))
7. $contenu = filter_texte ($_POST['le_texte']) ;
8.  
9. ?>

La deuxième figure associée à l'article montre une capture de l'exemple

Nous voici au terme de ce premier article sur DevAfrique. Veuillez cliquer ici pour télécharger le code source de l'exemple.

Notons que le but de l'article est de montrer comment intégrer simplement l'éditeur WYSIWYG FCKeditor dans une page Web. Dans des prochains articles nous allons couvrir comment filtrer le texte soumis pas l'utilisateur (d'où la présence de la fonction filter_texte dans le code source de l'exemple) pour des fins de sécurité et comment permettre la coloration syntaxique de code source.

Bon développement.