UX, Startups & Cie

7 éditeurs riches au banc d'essai

Mon article Recherche éditeur HTML désespérément a été visiblement mal compris, sauf peut-être de Xavier Borderie, et notamment la spécification non visuel. À croire que a) mes lecteurs ne savent pas lire, b) mon français n’est plus compréhensible par le génération skyrock, c) mes lecteurs ne lisent que les titres et se foutent du contenu, d) la réponse d.
Quoi qu’il en soit, mon appel au lazyweb n’aura été vain, puisqu’il m’a permis de découvrir un grand nombre d’éditeurs riche qu’il aurait été dommage de ne pas regrouper dans un billet, d’abord pour la ressource, ensuite pour le linkbait. Parce qu’il faut toujours dire ce que l’on pense, surtout si on a la réputation d’être retors.

1. TinyMCE

TinyMCE est probablement le plus ancien et le plus complet des éditeurs riches. Il dispose d’une API de plugins, du support d’AJAX, et il passe parfaitement sous Safari. La dernière version permet de générer du code propre et accessible, ce qui n’est pas gâché.

Meta données :
  • Licence : LGPL
  • Bibliothèques liées : aucune
  • Plus : hyper complet, multilingue
  • Moins : usine à gaz

TinyMCE

2. FCK Editor

Grand concurrent de TinyMCE, FCK editor est l’autre éditeur de texte riche à utiliser si vous cherchez un substitut web à votre traitement de textes favori. Il embarque une API de plugins, support les skins, l’AJAX, et il pase également très bien sous Safari. Les copier / coller depuis Word sont en revanche hasardeux, à moins de passer par la fonction dédiée qui supprime le formatage.

FCK Editor est l’éditeur riche utilisé dans Typo, car il dispose d’un plugin pour Ruby on Rails particulièrement complet.

Meta données :
  • Licence : LGPL
  • Bibliothèques liées : aucune
  • Plus : support des skins, plugin Rails
  • Moins : usine à gaz, markup pas top

fck editor

3. Mark it up

Mark it up n’est pas un éditeur WYSIWYG, mais il permet d’éditer avec de nombreuses syntaxes : html, bbcodes, markdown, textile, syntaxe wiki… Il se rapproche le plus de ce que je recherchais, mais il repose malheureusement sur la librairie JQuery. Il supporte l’envoi des informations via XMLHttpRequest, les skins, ainsi qu’un système de macros. Et surtout, il est beau.

Meta données :
  • Licence : GPL, MIT
  • Bibliothèques liées : JQuery 1.2.3
  • Plus : léger, multiples syntaxes supportées, support des raccourcis clavier
  • Moins : pas de WYSIWYG, pas d’upload d’images, lié à JQuery

mark it up

4. WYMEditor

WYMEditor – prononcez Why me est un éditeur de textes riche qui se veut simple, complet, et qui produit du code XHTML valide et sémantiquement correct. Il dispose également d’une API de plugins, et toute la mise en forme passe par des feuilles de style CSS facilement personnalisables.

Très léger, on lui reprochera cependant la limitation des fonctionnalités si on cherche une alternative aux fonctions avancées d’un FCK ou d’un TinyMCE, et surtout, le fait qu’il soit très moche.

Meta données :
  • Licence : GPL, MIT
  • Bibliothèques liées : aucune
  • Plus : léger, XHTML sémantiquement correct, simple
  • Moins : pas d’upload d’images, très laid

Wymeditor

5. NICEdit

NiceEdit est un éditeur HTML riche simple, léger, et qui produit du code XHTML relativement propre. Il dispose d’une API javascript, AJAX, et est entièrement configurable.

Meta données :
  • Licence : MIT
  • Bibliothèques liées : aucune
  • Plus : léger, XHTML à peu près correct, simple
  • Moins : pas d’upload d’images, pas d’internationalisation

NICEdit

6. YUI editor

YUI Editor est l’éditeur riche développé par Yahoo et placé au sein de sa librairie Yahoo! UI Library. Il est léger, très bien pensé et facile à utiliser. La documentation est excellente, et fournit de nombreux exemples de personnalisation et d’extension. Et en plus, il est beau.

Meta données :
  • Licence : BSD
  • Bibliothèques liées : YUI
  • Plus : léger, code propre, simple, beau, extensible
  • Moins : pas d’upload d’images (mais un lien vers Flickr)

YUI editor

7. WMD

WMD est un éditeur markdown, une syntaxe de mise en forme simple destinée à être transformée en XHTML sémantiquement correct. Il est léger, très simple d’emploi, et autorise la majorité des tags HTML. Il ne s’agit donc pas d’un éditeur riche au sens WYSIWYG, et il ne permet notamment pas d’agir sur le style des balises.

Meta données :
  • Licence : MIT
  • Bibliothèques liées : aucune
  • Plus : léger, code propre, simple
  • Moins : pas d’upload d’images, pas de WYSIWYG, moche

WMD editor

J’ai volontairement passé sous silence les JS Quicktags (en fait ce que je cherchais à l’origine) BB Composer, une extension Firefox qui transforme les textarea en éditeurs riches, car il n’est pas basé sur le web. Si vous en connaissez d’autres, signalez-vous dans les commentaires, je compléterai l’article au fur et à mesure.

  • Gravatar

    Par Nicolas Mérouze 27/11/2008 at 14h43

    Le seul autre que je verrais, c’est le framework d’éditeur WYSIWYG de 37 Signals : http://github.com/37signals/wysihat/tree/master. Le code semble propre par contre tout ce qui est i18n, upload d’images… c’est à coder à la main.

  • Gravatar

    Par Nicolas F. 27/11/2008 at 15h56

    Je ne connaissais pas YUI editor.

  • Gravatar

    Par Amaury 27/11/2008 at 16h05

    Listing intéressant, de mon point de vue NiceEdit semble être le meilleur éditeur si la simplicité et la légèreté sont les critères principaux.

    par contre tu cite souvent le critère “beau , pas beau” qui n’est on ne peut plus subjectif non ? :) (je ne dirais pas que WMD est moche, mais c’est vrai qu’on peut faire mieux)

  • Gravatar

    Par Guillaume 27/11/2008 at 17h29

    Bon, je ne suis toujours pas sûr d’avoir compris “non visuel”, pourtant a) je sais lire b) je n’ai jamais écouté Skyrock c) je lis tes messages avec attention d) la réponse d. Et en plus je ne suis pas Xavier Borderie, quelle poisse.

    Toujours est-il que la dernière fois que j’ai essayé TinyMCE, qui avait sur le papier ma préférence en matière de WYSIWYG, j’ai été fort dépité de constater qu’il ne générait pas le même code HTML selon le navigateur… Gras sous Firefox, ça donne strong, et sous Safari, ça se fait avec l’application d’un style inline “weight”. Bof. A revérifier cependant, ça fait quelques temps.

    Du coup je me suis rabattu sur MarkItUp : - il est beau - il me permet d’intégrer mon plugin à moi de gestion d’images, - le fait qu’il ne soit pas WYSIWYG est rendu plus supportable si besoin par une div de prévisualisation escamotable (y’a un exemple sur le site). - il est basé sur jQuery, ce qui est dommage si on a la malchance d’utiliser autre chose, très sympathique sinon.

  • Gravatar

    Par vincent 27/11/2008 at 19h09

    simple curiosité : en quoi est-ce un problème que MarkItUp repose sur jQuery ?

    d’ailleurs au final MarkItUp répondait à ta recherche initiale, donc tout comme JS Quicktags ; non ? ou alors y’a un truc que je comprend pas ? ou peut être que tu t’emballe un peu non ?

    quoi qu’il en soit cette liste est fort intéressante, merci pour cela

  • Gravatar

    Par Nicolas F. 29/11/2008 at 13h34

    @Guillaume : Le problème des éditeurs actuels est qu’ils utilisent les fonctions natives des navigateurs, ce qui en fait des usines à gaz qui rendent du code par propre ou pas valide.

    C’est parce que je ne voulais pas faire l’impasse sur ces problématiques et que je voulais un WYSIWYG pour mes clients que j’ai fait BBComposer.

    Mais de plus en plus, j’axe le développement de façon à pouvoir le faire fonctionner sur d’autres navigateur. Les conformes aux standards dans un premier temps, puis les autres.

    Bref, D’ici quelques temps, en fonction de l’aide qu’on me proposera, je pense pouvoir proposer une alternative à tous ces éditeurs, et pas uniquement pour les utilisateurs de Firefox comme c’est le cas actuellement.

    Du coup, j’en profite pour appeller à toutes les contributions : http://www.bitbucket.org/nfroidure/bbcomposer/overview/

    @+

  • Gravatar

    Par bruno bichet 29/11/2008 at 15h10

    Comme quoi, à toute chose malheur est bon, puisque ce billet me permet d’élargir mon horizon en matière d’éditeur visuel. J’espère que tu trouveras ton bonheur ;)

  • Gravatar

    Par wilfried 04/12/2008 at 10h34

    Parfois, un tout petit éditeur léger, propre et facile à installer suffit. Celui-ci ne fait pas des millions de trucs (quoi que…) mais il le fait bien :

    http://www.efectorelativo.net/laboratory/wysiwyg/

    Très simple à mettre en place, mais nécéssite mootools.

  • Gravatar

    Par Pascale 10/04/2009 at 19h35

    Bravo pour ce comparatif très intéressant. Je cherche un éditeur WYSIWYG simple au niveau de ses fonctions donc je pense que NiceEdit me suffirait bien (j’ai besoin d’offrir la possibilité de faire du gras, de l’italique, changer la taille et la couleur de la police, cadrer à droite, à gauche, centrer, et guère plus que ça). J’ai tenté d’installer FCKEditor, mais je suis un peu dépassée (c’est rien de le dire) devant la complexité de l’usine à gaz.

    Mes questions paraîtront sûrement du niveau neuneu aux spécialistes du ouaibe, mais bon (-:

    • le site où j’ai l’intention d’utiliser cet éditeur est fréquenté par des utilisateurs qui ne parlent pas tous anglais. Est-ce que je peux moi-même franciser les menus de NiceEdit ?

    • Il me faudrait impérativement un compteur de caractères, est-ce possible avec NiceEdit sans avoir l’impression de greffer une carpe sur un lapin ?

    • Il faudrait également que je puisse « nettoyer » les textes entrés par les utilisateurs afin d’éviter l’injection de scripts, et, là aussi, sans greffer une usine à gaz sur une autre usine à gaz.

    Si quelqu’un voulait bien me guider un peu dans l’univers impitoyable des éditeurs de texte enrichi, je lui en serais reconnaissante.

  • Gravatar

    Par Viktor 19/12/2009 at 08h48

    Bonjour,

    Personnellement, j’utilise celui-ci : http://www.kevinroth.com/rte/ j’ai réussi à trouver la partie java non compressée, je ne sais plus comment et je l’ai un peu modifiée…

    Je dois dire cependant que dans l’ensemble des éditeurs que j’ai essayé (une vingtaine), je suis assez voir très déçu, soit ce sont des usines à gaz, soit il manque quelques fonctions essentielles telles que pouvoir choisir la couleur du texte, un formatage correcte du code, ou encore que les photos qu’on fasse glisser (qu’on drague) se mettent directement à la bonne taille (comme ici : http://www.efectorelativo.net/laboratory/wysiwyg/) , …etc.

    Un truc qui me semblerait bien intéressant aussi, ce serait de pouvoir faire un copier/coller provenant de word, de garder l’essentiel et de formater cet essentiel grâce à une feuille de style (les balises de titres, le soulignement,… etc.) et non pas de se retrouver avec une redéfinition de style de plusieurs dizaines de lignes, si vous voyez ce que je veux dire.

  • Gravatar

    Par Viktor 23/12/2009 at 10h47

    Bonjour,

    Je me devais de faire un nouveau commentaire quelques jours après mon premier pour vous dire que finalement, j’ai opté pour la dernière version de FCK Editor, c’est beau, c’est personnalisable (j’ai supprimé quelques boutons) et je suis tout à fait satisfait de la fonction “Coller depuis Word”, en plus, le tout est traduit en français.

    Pour ce qui est de draguer une image redimensionnée en miniature et l’afficher à sa taille d’origine dans FCK Editor, si vous voyez ce que je veux dire, j’ai trouvé une astuce qui peut servir pour les autres éditeurs, je superpose 2 div, dans celle du fond, la miniature, et dans l’autre, l’image à la bonne taille mais en transparence (la div, pas l’image). Donc, quand je drague, je drague l’image à la bonne taille.

Commentaire 7 éditeurs riches au banc d'essai

Akei, conseil, formation et développement - Référencement blog - Pink SEO - Blog culture graphique - Google+