Un éditeur html wysiwyg (1)
Note: les exemples de cette page ne fonctionnent qu'avec Microsoft Internet Explorer 5.5 minimum.
Prélude
Ca fait quelque temps que je cherche du côté des éditeurs html wysiwyg pour saisir mes messages mais je ne trouve rien qui me plaise vraiment :
- ça en fait beaucoup plus que ce que je veux,
- ça emploie des <iframe> et ça gère donc des pages html entières (de <html> à <html>)
- c'est lourd à utiliser
- et c'est pas toujours donné...
Premiers pas
Et pourtant, il était une fois une gentille société d'informatique qui parmi tous les bienfaits qu'elle accompli quotidiennement a rendu possible la création d'une zone de saisie wysiwyg en trois fois rien de code :
Voilà! C'est tout. Sans rien faire d'autre, il est déjà possible de formatter le texte à l'aide de quelques raccourcis clavier :
- gras : Ctrl B
- italique : Ctrl I
- souligné : Ctrl U
Ce qui est magique, c'est qu'il suffit de taper une adresse html (ou mél) pour qu'elle soit automatiquement reconnue :
- je tape http://www.microsoft.com/ et ça devient : http://www.microsoft.com/
- je tape nospam@microsoft.com et j'obtiens nospam@microsoft.com
Et bien entendu, je peux aussi sélectionner du texte au clavier ou à la souris, faire du copier/coller, du glisser/déposer, et même de l'annuler/rétablir.
Réfléchissements
Ok, il semble y avoir quelques inconvénients :
- je ne peux pas définir la balise title pour les liens (de toute façon je ne le fais pas encore)
- je ne vois pas comment insérer une image
- la hauteur de la zone grandit quand on tape trop de texte (quoique, c'est la hauteur ou la zone qui grandit ?)
- l'interligne est beaucoup trop importante
Je m'occuperai de ça plus tard. En attendant, il faut que je trouve un moyen pour pouvoir récupérer ce qui a été saisi. Eclair de génie, je n'ai qu'à remplacer la balise <span> par une balise <textarea> :
J'essaie (vous le pouvez aussi) :
Oups! ça marche pas. Dommage, mais j'aurais du m'en douter vu qu'ils n'en parlaient pas chez Microsoft. Je n'ai quand même pas tout perdu, la barre de défilement de la <textarea> me semble un bon truc pour essayer de figer la hauteur de la zone de saisie. Qu'est-ce que ça donne si j'ajoute un petit «overflow-y: auto;» au style ?
Un troisième essai :
Eureka! Ca ne bouge plus. Ok, je ne suis pas très sûr que ça soit du CSS standard, mais de toute façon «contentEditable» c'est déjà du MicrosofHTML. Y'aura qu'à prévoir une version dégradée avec un bête <textarea> pour les adorateurs du monde libre :).
Et pareil, pour le problème d'interligne, ça doit pouvoir se résoudre avec du CSS. Mais j'ai dit plus tard !
Revenons en à la récupération
J'ai un peu la flemme de vérifier mais je suppose que je ne pourrais pas récupérer mon texte directement à partir d'un formulaire, comme un contrôle <input> classique. Il va donc falloir ruser.
Le truc, ça va être de copier le texte saisi dans un contrôle <textarea> pour qu'il puisse être posté dans un formulaire. Voyons voir :
<button onclick="CopyContent('memoVisible', 'areaInvisible');">Tada!</button>
<textarea id="areaInvisible" style="{ ... }"></textarea>
<script language="JavaScript" type="text/javascript">
<!--
function CopyContent(sHtmlSource, sTextTarget)
{
document.getElementById(sTextTarget).innerText = document.getElementById(sHtmlSource).innerHTML;
}
//-->
</script>
Là il faut saisir du texte, en sélectionner, faire des Ctrl B, Ctrl I et Ctrl U puis cliquer sur [Tada!] (pas celui là, l'autre) :
J'avoue. J'ai quand même un peu galéré avec le javascript avant de réussir à ce que ça marche et j'ai modifié le code après coup pour qu'il soit un peu plus générique. A part le fait que ça soit de l'HTML et pas du XHTML, ça semble pas trop mal. Si je cache le <textarea> et que je fait mon «CopyContent(...)» juste avant le «formulaire.submit();», ça devrait être bon.
Prochains épisodes
Normalement, il devrait y avoir une suite. Il faut que transforme l'HTML en XHTML, que je puisse insérer une image et peut être même que j'ajoute une (petite) barre d'outils. Mais je dois reconnaitre que c'est quand même pas mal pour l'instant et que je vais sans doute m'en contenter quelque temps. Sans compter que je dois encore le mettre en oeuvre dans mon moteur de blogue...
Conclusion
«contentEditable» existe depuis au moins mai 2000, c'est super facile à utiliser, alors pourquoi est-ce que tout le monde se fait ..... avec des <iframe> et des systèmes super compliqués qui pour la plupart nécessitent quand même IE ?
Crédits et références
- Using JavaScript to Create a Powerful GUI (Meg Hourihan)
- Un éditeur adapté de celui de UserLand (David Carter-Tod)
- Building a WYSIWYG HTML Editor Using Only JavaScript and HTML (Mitchell Harper)
- Creating Editable Web Pages in Internet Explorer 5.5 (Peggi Goodwin)
- et pour ceux qui serait enfin prêt à migrer vers Microsoft Internet Explorer...
Publicités
