Editions ENI Livres | Vidéos | e-Formations
Un éditeur de texte
Quelques outils
1. Du textarea vers le contenteditable
On a toujours besoin d’un éditeur de texte dans une WebApp. Et si l’on peut utiliser du texte enrichi, c’est encore mieux. Avec les navigateurs récents, il n’est plus nécessaire de faire appel à des librairies telles que CKEditor ou TinyMCE. Tout est disponible dans le navigateur : grâce à l’attribut contenteditable tout élément devient éditable et c’est le navigateur qui se charge de la mise en forme.
Ce nouvel attribut fait partie des créations du HTML 5. C’est une véritable bénédiction pour tous les développeurs d’applications web, n’importe quel bloc de texte est éditable, de la même façon qu’un champ textarea, mais avec la possibilité d’enrichir le texte. En fait, contenteditable offre les mêmes possibilités que des librairies dédiées, mais de façon native dans le navigateur, avec une plus grande compatibilité, et avec la possibilité de le configurer comme on veut.
La méthode historique pour créer une zone de texte éditable consiste à utiliser le tag textarea. C’est assez simple à mettre en œuvre.
<!DOCTYPE html>
<html>
<head>
<title>TEXTAREA</title>
<meta charset='utf-8'></meta>
</head>
<body>
<textarea style='width:320px; height:160px; font-family:serif'>
Texte à éditer ...
</textarea>
</body>
</html> Même si l’on peut aussi définir sa largeur et sa hauteur en utilisant les attributs rows et cols, l’utilisation des styles width et height permet de mieux en contrôler les dimensions. Il offre aussi l’avantage de pouvoir comparer aisément les rendus graphiques de contenteditable et textarea.
Utiliser contenteditable n’est pas plus difficile qu’utiliser textarea. La syntaxe se base sur un bloc div auquel on ajoute l’attribut contenteditable="true" (en fait, on peut appliquer contenteditable à de très nombreux tags HTML). Il est très important d’affecter la valeur true, car l’attribut contenteditable utilisé seul, même si cela...
Le programme
1. Les initialisations
Il est maintenant temps de passer à l’étude du code JavaScript, en commençant par les initialisations.
var selectColorCmd=0;
var editObject=0;
var blurTimeout=0;
editInit(); Trois variables globales sont nécessaires pour stocker l’état de l’éditeur :
-
selectColorCmd : l’identifiant du bouton qui a provoqué l’affichage du sélecteur de couleurs. Cela peut être foreColor ou hiliteColor. Ainsi, lorsqu’une couleur sera sélectionnée, on saura s’il faut changer la couleur du texte ou la couleur du fond.
-
editObject : l’objet en cours d’édition (généralement un div), cela permet de lui rendre le focus après avoir cliqué sur un bouton.
-
blurTimeout : identifiant du timer lancé pour désactiver le champ éditable si l’on clique ailleurs.
On appelle ensuite la fonction editInit qui sert, bien évidemment, à initialiser les objets composant l’éditeur et aussi à déclarer les événements.
function editInit()
{
var editList=document.getElementsByClassName('edit');
for(let edit of editList)
{
edit.addEventListener('focus', editFocus);
edit.addEventListener('blur', editBlur);
} La fonction getElementsByClassName retourne un tableau qui contient tous les éléments qui contiennent la classe edit. Cela permet de gérer autant de champs éditables que l’on veut sur une même page. La boucle for of permet ensuite de parcourir ce tableau et ajouter deux événements à chaque objet éditable au moyen de la fonction addEventListener, un événement lorsque l’objet obtient le focus, et l’autre lorsqu’il le perd (blur). Voici la signature de cette fonction :
addEventListener(type, callback, options)
-
type : le nom de l’événement à surveiller.
-
callback : la fonction à...
