11 éditeurs HTML WYSIWYG et WYSIWYM

Ces éditeurs WYSIWYG ont la particularité d’utiliser Javascript pour convertir le contenu des champs créés à l’aide de la balise textarea en contenu HTML principalement ; certains éditeurs proposent également d’autres syntaxes : Wiki, BBCodes, XBBCodes, Markdown, Textile ou Dotclear. Le point commun de ces outils est de proposer des icônes plus ou moins explicites pour donner aux portions de textes adéquates le sens ou la mise en forme désirés sans être obligé de saisir les balises HTML. Ces éditeurs sont généralement utilisés dans les CMS où ils permettent aux utilisateurs de saisir du texte presque comme dans LibreOffice ou Microsoft Word !

  1. BBComposer  — Cet éditeur se distingue des autres, car il se présente sous la forme d’une extension Firefox qui propose un environnement WYSIWYG pour produire du code HTML (mais aussi du Wiki, BBCodes et XBBCodes).  Point fort : la création de super blocs pour envelopper du contenu avec des balises DIV et l’application de classes CSS sur les éléments. Revue complète dans BBComposer — l’éditeur HTML à consommer sur place ou à emporter. Démo.
  2. TinyMCE — Editeur HTML simple à insérer dans votre CMS préféré. Il s’agit probablement de la solution la plus complète et la plus aboutie graphiquement — malgré le manque de la gestion des images et de l’upload dans la version gratuite. Il reste néanmoins possible d’acheter les modules correspondants. Démos.
  3. CKEditor — L’accessibilité et la compatibilité avec les navigateurs et la possibilité d’uploader des images sur le serveurs sont les points forts de cet éditeur.  Le code est valide et il est possible d’ajouter un container DIV en spécifiant une classe CSS (idem sur les liens, les images et d’autres éléments HTML). Très complet et joli graphiquement, c’est un concurrent sérieux à TinyMCE. Possibilité d’afficher les blocs HTML et d’utiliser des modèles pour vos articles. Démos.
  4. Aloha Editor — Basé sur la propriété contenteditable de HTML5, Aloha présente une particularité intéressante : la barre d’outil flotte au-dessus du texte à modifier pour offrir une expérience immersive à l’instar du mode plein écran que l’on trouve dans WordPress. A propos de WordPress, voici une démonstration assez bluffante de la modification de contenu « sur place ». Point fort : produit du code xHTML5 valide ! Voir les autres Démos.
  5. markItUp! — Ce n’est pas à proprement parler un éditeur WYSIWYG mais plutôt WYSIWYM. Il vous permettra de produire plusieurs syntaxes : HTML, BBCode, Markdown, Textile, Wiki ou Dotclear très facilement. Nécessite jQuery.  Le point fort de markItUp est sa compatibilité avec des éléments extérieurs comme FarbasticSimplemodal ou jQuery UI. Lire le tutoriel très complet de Clément Guillemain. Démos.
  6. WYMEditor — Cet éditeur WYSIWYM (What You See Is What You Mean) met le paquet sur la sémantique tout en offrant un confort digne d’un éditeur WYSIWYG. Le point fort de cet éditeur est de fonctionner par classes CSS pour styler les différents éléments de votre contenu. Démos.
  7. YUI Rich Text Editor — L’éditeur de Yahoo! Son architecture modulaire offre une extensibilité très importante avec des modules comme la recherche d’images sur Flickr, Calendrier pour afficher des dates ou l’insertion d’icônes. Point fort : peut être intégré de pratiquement n’importe quelle manière dans vos projets. Démos.
  8. Xinha — Projet Open source sous licence BSD. Cet éditeur est hautement configurable et se nom se prononce comme Xena, la guerrière… Que demander de plus ? Démos.
  9. jWYSIWYG — Basé sur jQuery, il offre de nombreuses options de configuration. Démos.
  10. PHP Markdown — Lire Markdown — L’éditeur presque WYSIWYG.
  11. htmlArea — Le projet est arrêté, mais il est toujours possible de télécharger la dernière version de l’éditeur. Le site est désormais un répertoire d’éditeurs WYSIWYG et d’autres outils web. A garder sous le coude.

N’hésitez pas à me faire part de vos retours d’expériences sur ces éditeurs HTML ou à proposer ceux que vous utilisez s’ils étaient absents de cette liste o/