Principe de la contribution

Cette contribution nous a été demandée par des rédacteurs, qui, ne supportant pas de voir des accolades et des crochets dans leurs textes, ne trouvaient pas SPIP assez WYSIWYG... Il faut le reconnaître, cet aspect peut rebuter de nombreux utilisateurs lambdas voire bêtas parfois face à d’autres éditeurs, pour ne pas les citer, Dreamweaver ou FrontPage (arrgh).

Nous avons donc réalisé une petite prévisualisation dynamique (voire une pré-prévisualisation puisque la prévisualisation existe déjà après validation de l’article...). Le but étant de montrer ce que donne le texte SPIP dans une DIV lorsque le rédacteur relâche son clavier pendant une seconde.

Les objectifs étaient, en résumé :
-  afficher une prévisualisation du texte de l’article dans la page d’édition,
-  ne pas avoir besoin de valider un formulaire (et recharger la page) pour voir la prévisualisation,
-  intégrer cette prévisualisation dans le formulaire SPIP de manière aussi propre et aussi simple que possible,
-  permettre aux rédacteurs de cacher cette prévisualisation si elle les gêne.

Voici une capture pour vous montrer ce à quoi ça ressemble sur un SPIP 1.8.1... mais vu que c’est interactif vous ne le saurez vraiment qu’en l’essayant !

En bref, un éditeur WYSIWYG réalisé spécifiquement pour SPIP, simple et léger, qui plaira certainement aux rédacteurs en mal de visualisation. Il paraît que l’on travaille sur un SPIP qui intégrerait Ajax dans certains menus et formulaire pour plus d’interactivité (auquel cas je me ferais un plaisir d’adapter le code à d’éventuelles librairies Ajax).

Techniques mises en oeuvre

De manière simplifiée et pratique : tant que l’utilisateur tape ses touches clavier dans le champ « Texte », rien ne se passe. Lorsqu’il arrête de le faire pendant au moins une seconde, le bloc de visualisation est mis à jour (la première fois, il apparaît) juste en dessous du formulaire, qui lui montre le rendu du texte dans son navigateur.

Cette contribution est basée essentiellement sur Ajax, qui permet de faire une requête HTTP en Javascript de manière asynchrone, en envoyant le texte saisi dans le formulaire « Texte » de l’article puis en retirant le code HTML correspondant au texte dans lequel SPIP aura interprété les codes SPIP et de l’afficher dans une DIV (le HTML est donc interprété par le navigateur).

Un délai (une seconde par défaut) est inséré entre l’événement clavier et la requête HTTP, ainsi tant que l’utilisateur appuye sur les touches du clavier, l’affichage ne se met pas à jour. Lorsqu’il relâche son clavier, le résultat apparaît comme par magie en dessous de son formulaire ! Attention, cela ne vaut pas une validation et il faut toujours valider l’article sinon les modifications seront perdues.

Techniquement, l’événement « onkeypress » du textarea appelle la fonction Javascript « delayFunction », fonction générique dont le premier paramètre est une autre fonction Javascript, le second un délai. Cela permet d’attendre avant de mettre à jour la visualisation. A noter que lorsque que cette même fonction est appelée, elle annule le délai précédent et en crée un nouveau. D’où l’effet de temps-mort « tant qu’aucune touche n’est appuyée » avant de récupérer une prévisualisation.

La seconde fonction, délayée, effectue (à la fin du délai si vous avez suivi) une requête HTTP, sur une URL et en lui passant des paramètres. Lors de la réception de la réponse, le HTML reçu vient remplir une balise DIV identifiée. Les paramètres sont passés en POST. On lui fournit également des fonctions de callback appelées avant l’appel, au retour de l’appel et après insertion du code HTML reçu dans une DIV.

Installation de la contribution

Pour créer cette contribution, le fichier ecrire/articles_edit.php3 a été légèrement modifié, à partir d’un SPIP 1.8.1 (on peut l’écraser pour cette version). Pour les autres versions de SPIP, il suffit de rechercher les commentaires sous la forme :

// AJAX

Ces commentaires interviennent avant et après les balises ajoutées (une inclusion de librairie PHP3 un lien vers un fichier Javascript) et modifiées (le textarea qui permet d’entrer le texte de l’article) dans ce fichier.

Il suffit ensuite d’ajouter dans ce répertoire ecrire les fichiers :
-  ajax.js
-  article_preview.php3
-  inc_ajax_preview.php3

Puis écrivez un article, le résultat s’affiche en-dessous. Les tailles du textarea et de la prévisualisation s’ajustent lors de l’apparition de cette dernière. Enfin, comble du perfectionnement, lors de l’actualisation, les deux champs (textarea et div) scrollent au même endroit pour que la prévisualisation affiche effectivement le texte en train d’être édité (ceci dit, malheureusement, l’ajustement n’est pas parfait dans de nombreux cas) !

Fonctionnement de la librairie générique Ajax

La librairie Ajax se veut générique et peut-être utilisée pour d’autres mises à jour dynamiques, tant que l’on met à jour dynamiquement une balise DIV, en effectuant une requête HTTP sur une URL à laquelle on passe des variables. Etant générique, un fichier Javascript lui a été dédié, ainsi qu’une librairie PhP pour simplifier les appels délayés (qui nécessitent des échappements de quotes multiples).

La librairie PHP crée donc un code Javascript, que l’on placera en tant qu’un événement Javascript (onkeypress dans notre cas). Dans notre cas, le code placé est le suivant :

Dans le fichier PhP de création du code Ajax (inc_ajax_preview), la fonction a la forme suivante :

formUpdateAjaxDelay($url, $fields, $div, $delay, $onCall, $onResult, $onUpdate)

Les paramètres sont :
-  $url : l’URL du fichier à appeler en HTTP,
-  $fields : tableau PHP des ids des éléments de formulaires à passer en paramètres, leurs noms et valeurs sont récupérées en Javascript pendant la construction de la requête,
-  $div : id du DIV à mettre à jour lorsque l’on reçoit la réponse,
-  $delay : délai à attendre avant d’envoyer la requête,
-  $onCall : code Javascript évalué juste avant l’appel HTTP,
-  $onResult : code Javascript évalué juste après le retour de la requête HTTP,
-  $onUpdate : code Javascript évalué après que le DIV ait été mis à jour.

Nous pouvons donc y associer trois textes Javascript, avant l’appel, au retour de l’appel et après avoir écrit le résultat dans la DIV. C’est du code Javascript évalué, vous pouvez donc y manipuler le DOM et y faire éventuellement des alertes pour tester les appels, les résultats Ajax. Ce code Javascript est pour PhP une string, faites attention aux quotes.

Pour note et comme exemple d’utilisation de notre fonction PhP, dans notre cas nous écrivons un code Javascript dans la variable $onUpdateFunction (cette variable est donc passée en paramètre de la fonction PhP formUpdateAjaxDelay), qui permet dans notre cas d’ajuster les tailles et le défilement des champs texte, elle est définie avant l’appel par le code suivant :

De même, après notre textarea (en dessous), vient l’encart de visualisation, caché par défaut, que l’on affiche lors de la réception des résultats. J’avoue le code est assez barbare avec beaucoup de fonctions Javascript mais il vous suffit de le recopier, (de préférence à partir du package distribué plus bas). Je le mets tout de même ici à titre d’exemple :

En conclusion

Voilà, Ajax tellement vanté (ou décrié, selon) par les programmeurs Web est en fait relativement simple à mettre en oeuvre. Il faut juste ne pas avoir peur d’utiliser Javascript massivement (Google le fait pour ses maps et son mail) et oser manipuler le DOM (Document Object Model) qui est maintenant bien défini et standardisé).

Bien sûr, je suis à votre disposition pour toute info complémentaire et surtout pour perfectionner deux trois aspects de la contribution (notamment le scroll du textarea et du div en fonction de la position du curseur dans le textarea... ou la synchronisation des deux scrolls...).