WYSIWYG et WYSIWYM : Faisons le point

Découvrez les différences, avantages et inconvénients des éditeurs de textes avec options de formatage, les WYSIWYG, et leurs cousins semblables dans la forme mais pas dans le fond : les WYSIWYM

Pour commencer, un peu de vocabulaire.

D’après wikipedia, « Un WYSIWYG (prononcé [wɪziwig] ou [wiziwig]) est une interface utilisateur qui permet de composer visuellement le résultat voulu, typiquement pour un logiciel de mise en page, un traitement de texte ou d’image. C’est une interface « intuitive » : l’utilisateur voit directement à l’écran à quoi ressemblera le résultat final. »

Le mot WISYWIG est l’acronyme de What You See Is What You Get. En gros, ce que vous voyez est ce que vous obtenez.

Ce terme regroupe tous les logiciels de traitement de texte comme par exemple libre office, Microsoft office, … Mais aussi les logiciels d’édition web dans le style de Dreamweaver d’Adobe, ou BlueGriffon.

Dans le monde du webdesign, les WYSIWYG sont des éditeurs en javascript, qui s’installent sur un text area, et qui fournissent des options de formatage comme l’écriture en gras/italique et le changement de taille et de police directement visible dans le text area.

Quelques exemples:

TinyMCE

CKeditor

NiceEdit

Les points important d’un éditeur WYSIWYG étant d’avoir une possibilité pour éditer directement le HTML (c’est parfois nécessaire), d’être en full javascript pour ne pas dépendre d’une configuration serveur particulière et de générer le code le moins « crade » possible.

Pourquoi un code le « moins crade » possible, et pas un code le « plus propre » possible ? Car c’est impossible. Ces éditeurs génèrent tous un code avec du style dans les balises, des br de partout et beaucoup trop de balises inutiles (comme des <p><br/></p>, par exemple, pour tinyMCE, qui génère un des codes les moins encombrés.

Il existe pourtant une alternative aux WYSIWIG : les WYSIWYM (What You See Is What You Mean), ce que vous voyez est ce que vous voulez dire.

Les WYSIWYM ont la particularité de ne pas montrer directement ce que vous aurez comme rendu final (il existe quand même généralement une prévisualisation du résultat), mais un rendu schématique de ce qui a été demandé. Cela permet un bien plus grand contrôle : rien ne se fait derrière notre dos.

Un excellent exemple de WISYWIM est BUEditor : Un Textarea, et des boutons qui insèrent directement dans une textarea du code HTML.

L’inconvénient, ici, est que l’on jongle avec du HTML et que j’aime de moins en moins le HTML en temps que markup langage : il est trop verbeux, trop fouillis. Heureusement, il existe des alternatives, comme le markdown. Et heureusement, il existe des éditeurs qui vont avec :

Markitup

jQuery-wysiwym

Ces deux là sont personnellement mes deux chouchous. Leur seul inconvénient par rapport à un WYSIWYG est que les images ne sont pas affichées, mais seulement leurs liens. Pour palier à ce problème, il y a wymeditor, l’éditeur WYSIWYM qui se la joue WYSIWYG. Si vous êtes fan des wysiwyg, prenez le temps de le tester, et de bien apprécier les différences. Il mérite vraiment d’être connu.

Wymeditor

Le WYSIWYG est un outil qui simplifie grandement l’édition, c’est vrai, mais à quel prix ? Un code indigeste, pas standard, et pas forcément excellent pour le référencement.

Les WYSIWYM résolvent bien ces problèmes et le fait de pouvoir utiliser plusieurs langages (BBCode pour la plupart des forums, Markdown pour le traitement de texte, latex pour les mathématiques, l’impression, …) les rendent bien plus puissants. Il est peut être temps de changer nos habitudes et de remplacer le bouton « edit HTML source » par « preview ».