• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

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

Les WYSIWYG

Pour commencer, un peu de vocabulaire.

D'apres 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 tout les logiciels de traitement de texte comme par exemple libreoffice, 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 formattage 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

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é demmandé. Cela permet un bien plus grand contrôle: rien ne se fait derrière notre dos.

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

BUEditor

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 language: il est trop verbeux, trop fouilli. Heureusement, il existe des alternatives, comme le markdown. Et re-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'editeur WYSIWYM qui se la joue WYSIWYG. Si vous êtes fan des wysiwyg, prenez le temps de le tester, et de bien apprecier les différences. Il mérite vraiment d'être connu.

Wymeditor

Conclusion

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 languages (BBCode pour la plupart des forums, Markdown pour le traitement de texte, latex pour les mathematiques, 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".

Vous en pensez quoi ? 

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

17Commentaires

  • Avatar_thumb
    Sébastien Pillien

    le 04/10/2011 | #1

    L'intention est louable d'avoir du code propre sauf que pour moi il faut laisser la liberté du Wysiwyg à l'utilisateur, quitte à refaire une passe derrière pour assainir le code 'salement' généré..
    Sinon il faut le former, même un minimum et surtout lui faire comprendre pourquoi le voisin a une solution graphiquement plus simple à gérer..
    Un bon sujet en tout cas..

    • Avatar_thumb
      Marcus Vintage

      le 04/10/2011 | #2

      Ce qui m'hallucine c'est de voir les boites de comm' qui cherchent du codeur frontend sachant se servir de dreamweaver qui est quand même le pire soft qui puisse exister pour coder...

    • Avatar_thumb
      Agence Net Zen

      le 04/10/2011 | #3

      Merci pour ce point de vue

      Tout dépend qui utilise ces outils.

      Si c'est une personne lambda qui met à jour du contenu, elle n'aura pas la maîtrise des balises html et du référencement, donc un outil Wysiwyg sera plus adapté.

      En temps que référenceur, je code directement dans un textarea donc n'ai pas besoin d'outils, un webmaster avec moins de connaissances préférera sans aucun doute un éditeur WYSIWYM pour l'aider dans sa saisie et générer comme écrit un code propre.

    • Avatar_thumb
      Benjamin SANCHEZ

      le 04/10/2011 | #4

      @all: Effectivement, pour les utilisateurs lambda sans la moindre formation, le WYSIWYG reste le plus simple. Il est tellement plus facile de comprendre un texte directement en gras qu'un texte *entouré par des asterisques*, même si ça semble assez proche.

      @Agence Net Zen: Même avec les connaissance, il est toujours agréable d'avoir des outils pour accélérer la saisie, je trouve.

    • Avatar_thumb
      Fabz

      le 04/10/2011 | #5

      Je me vois mal proposer aux clients le WYSIWYM et sachant que rares sont ceux qui ont les connaissances nécessaire pour son utilisation...

    • Avatar_thumb
      Laurent Leborgne

      le 04/10/2011 | #6

      Avec l'émergence d'HTML5, et la compatibilité navigateur de plus en plus grande de l'attribut "contenteditable" (lancé par Microsoft dans IE 5.0), des solutions comme http://www.aloha-editor.org/ commencent à devenir crédible et peuvent s'avérer à terme plus intéressante, en cela qu'elles combinent en quelque sorte les buts à la fois du WYSIWYG et du WYSIWYM. A suivre, mais très bon post, en tous les cas.

    • Avatar_thumb
      Benjamin SANCHEZ

      le 04/10/2011 | #7

      @Fabz: Je pense que cela peut dépendre du client.
      Un client ayant des besoins très très précis n'aura pas choix et devra passer par du LATEX, par exemple.
      Un client un peu débrouillard pourrais se servir de WYMeditor, et avoir un ref un peu plus performant.
      Et la plupart des clients auront déjà besoin d'un peu de formation pour tinyMCE, donc un WYSIWYM est impensable.

    • Avatar_thumb
      Nicolas TORRES

      le 04/10/2011 | #8

      <p>Voici un WYSIWYG avec un code un peu moins indigeste, je vous laisse juger : <a href="http://ntorres.me/works/nrich" rel='nofollow'>http://ntorres.me/works/nrich</a></p> <p>Je l'ai développé car je voulais le pratique du WYSIWYG sans perdre en qualité de code ;).</p>

      • Avatar_thumb
        Benjamin SANCHEZ

        le 04/10/2011 | #9

        @noclat: effectivement, le code rendu est pas mal tant qu'on ne spam pas les styles. S'il y a abondance, il se perd un peu. Compte tu l'améliorer? Je pense qu'il pourrait devenir une alternative supplémentaire, une fois riche de quelques options supplémentaires, comme éditer directement la source.

      • Avatar_thumb
        Arnaud Lemercier

        le 05/10/2011 | #10

        Effectivement, le choix est difficile puisqu'il n'y a pas de bonne solution.
        Je crois qu'il y a encore pire que le code généré par ces éditeurs, c'est le code généré par un copier/coller depuis Word ou son équivalent Mac.
        En tout cas, je conseille de brider un maximum les options des éditeurs pour éviter d'avoir des sites "fêtes foraines" ;)

      • Avatar_thumb
        Nicolas TORRES

        le 05/10/2011 | #11

        @Benjamin SANCHEZ : une telle source n'est possible que par un cleanage, donc une limitation des balises autorisées. Si je laisse la source libre, ça devient ingérable pour l'utilisateur qui ne comprendra pas pourquoi ses éléments ne se mettent pas en forme. Je pars du principe que tous les styles s'appliquent en post-production avec du CSS, centrage des images compris. Donc mon éditeur ne génère que du html brut. Je n'essayerai pas de lui apporter plus de fonctionnalités, mais de l'améliorer pourquoi pas (de l'optimiser lui et l'expérience utilisateur).

        • Avatar_thumb
          Wiloooo

          le 06/10/2011 | #12

          Bonjour, j'étais sur tinycme c'est une catastrophe, cette machine à gaz ajoute des <Br /> de partout ... Je pense migrer vers markitup, il est le seul à gérer les couleurs...

        • Avatar_thumb
          Benjamin SANCHEZ

          le 06/10/2011 | #13

          @noclat: Je ne parle pas d'éditer le HTML pour mettre du style dans les balises! Mais par exemple, supprimer un br quelque part, fusioner deux p... bref, faire quelques petites retouches de précisions.
          @Wiloo: La plupart des éditeurs permettent d'ajouter des boutons, donc pour la couleur, ça doit pouvoir se gérer de partout, je pense.

          re@noclat: En définitive, ton WYSIWYG, s'il ne montre pas réelement le contenu tel qu'il sera utilisé en production (vu qu'il ne charge pas le CSS), c'est plus un WYSIWYM, non? ^^

        • Avatar_thumb
          FA

          le 06/10/2011 | #14

          Bonjour, Moi je bosse pour une agence d'événement pour qui je bidouille un site avec l'éditeur apple iweb...Malgré ses limites j'en suis très content, mais je sent bien que je vais devoir me coller à autre chose pour évoluer. Seulement, je n'y connais rien en code...ni vers quel logiciel me tourner... Vous conseillez quoi pour passer du WYSIWYG à un autre logiciel?

        • Avatar_thumb
          Nicolas TORRES

          le 06/10/2011 | #15

          @Benjamin SANCHEZ : c'est un WYSIWYG/M =P comme tu le dis il ne montre pas l'exact rendu, il permet d'appliquer de la sémantique sur un texte. De cette manière, c'est impossible (du moins publiquement) de sortir un tel outil en ouvrant la source et dire "vous pouvez toucher, mais évitez ça, ça et ça". Du coup je ferme la source, et tout est normalement disponible là. Je pars également du principe qu'un site a des articles avec une mise en page relativement uniforme, et donc que de mettre des outils comme police, couleur, alignement n'est pas pertinent. C'est un point de vue personnel et assumé, c'est pour quoi je ne modifierai pas mon éditeur dans ce sens. Enfin, sans aller jusqu'à la prétention, le code fourni est relativement correct et avec le fameux "shift+entrer" tu places tes BR et fusionnes tes P à souhait ;) !

          • Avatar_thumb
            Smithf957

            le 07/06/2014 | #16

            I'm really impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you customize it yourself? Anyway keep up the excellent quality writing, its rare to see a great blog like this one these days..

          • Avatar_thumb
            tetue

            le 18/07/2014 | #17

            Je ne suis pas d'accord avec la définition du WYSIWYM et les exemples qui en sont donnés… À partir du moment où l'on rédige directement avec du code, qu'il s'agisse de balises HTML ou des caractères spéciaux d'une syntaxe à balisage léger de type Markdown, c'est du WYSIWYC (what you see is what you code). Le WYSIWYM (what you see is what you mean) suppose un rendu formel minimal qui, contrairement au WYSIWYG ne correspond pas au rendu final, qui ressemble à « ce que je pense », hiérarchisant un minimum le texte avec des gras, des titres, etc. Non ? C'est le cas de certains outils de rédaction backend, qui donnent un aperçu (WYSIWYM), non fidèle au rendu final frontend (sinon ce serait du WYSIWYG), tout en laissant la possibilité d'éditer le code (WYSIWYC).

          Ecrire un commentaire

          captcha

          Ouvrir