Tout d’abord, une petite explication s’impose : Qu’est-ce qu’un éditeur wysiwyg ? Il faut savoir que wysiwyg est l’acronyme de what you see is what you get (Ce que vous voyez c’est ce que vous obtenez). Pour être plus clair, lorsque vous formaterez du texte dans cet éditeur (mise en gras par exemple), vous verrez directement le texte en gras, et non pas avec les balises qui le formatent.
Ici, je ne vais pas écrire un classement, pour la simple raison que comme beaucoup de choses tout dépend surtout de l’utilisation que vous aurez de l’outil. Ce n’est pas non plus (loin de là) une liste exhaustive des éditeurs existants. Il faut plutôt voir cet article comme un pense-bête de manière à pouvoir choisir rapidement, sans vous perdre dans la masse de l’existant pour trouver celui qui correspond le mieux à vos besoins.
Avant toute chose, il faut bien définir l’utilisation que vous aurez de cet éditeur. Dans mon cas, j’avais besoin d’un éditeur wysiwyg sans dépendances lourdes. L’éditeur devait me permettre de gérer un certain nombre de formatages de texte (italic, gras…) et de styles (couleur du texte et du fond, police…). De plus, le texte formaté était destiné à être transmis via une API pour être affiché par des services sur lesquels je n’avais pas la main. L’éditeur en lui-même devait pouvoir afficher les boutons dans un ordre précis.
C’est un éditeur open source. Il vous permettra de tout faire, que ce soit nativement ou via des plugins maintenus par la communauté. Comme toute usine à gaz, s’il vous permet en effet de tout faire, il faudra prévoir du temps (et peut-être des soucis) pour l’installer et le configurer exactement selon vos besoins. Bien qu’il soit certainement le plus connu, il n’est visiblement pas le plus apprécié. Pour ma part, dans un souci de légèreté et de dépendances réduites, j’ai fait le choix de ne pas l’utiliser.
Open source lui aussi, il est activement développé par l’équipe de Basecamp. Il est vraiment simple d’utilisation et c’est celui sur lequel je me suis décidé au début. Il ne possède cependant pas toutes les fonctionnalités de base qu’on peut attendre pour ce genre d’outil. Il est basé sur des technologies web récentes et, en théorie, il est très facile de lui développer des plugins s’il manque de fonctionnalités.
Comme on peut le voir sur ce ticket, il ne supporte pas nativement la modification de style ; et si en effet il est assez simple de créer un plugin pour souligner du texte par exemple, c’est une autre histoire lorsqu’il s’agit de plugin plus complexe comme l’alignement du texte.
C’est le local de l’étape, développé par un lillois.
Ce surnom, n’est pas à prendre négativement : il est plutôt complet en termes de fonctionnalités, et surtout particulièrement léger :
20kB only (8kB gzip)
Il a presque tout ce qu’on peut attendre d’un tel éditeur, Pour mon utilisation, il manquait simplement le choix de la police et sa taille. Avec un peu de temps il devrait être possible d’ajouter ça sans trop de problèmes en s’aidant de cette pull request qui visiblement ne sera pas fusionnée, car elle contient une fonction trop grosse pour le cœur de cet éditeur qui se veut léger. Malheureusement nous n’avons pas toujours le temps, je suis donc parti voir ce que je pouvais découvrir ailleurs.
Derrière ce surnom un peu négatif, se cache en fait l’éditeur pour lequel j’ai opté. Il gère nativement toutes les fonctionnalités dont j’avais besoin. Il est très facile à intégrer et personnaliser, il est donc parfait au premier abord. En effet ce qui ne saute pas aux yeux, c’est qu’il n’est pas fait pour exporter du HTML mais un format maison, le Delta. Je m’en suis rendu compte un peu tard, j’ai donc cherché une solution. Il en existe plusieurs :
querySelector('ql-editor').innerHTML
Ce sont les solutions proposées par l’auteur sur ce ticket
Avant d’opter pour l’une ou l’autre, il faut aussi savoir que pour certains formatages de style (alignement par exemple) Quill ne rajoute pas de style inline, mais ajoute simplement une classe CSS. Celle-ci devra être déclarée dans la feuille de style de la page pour laquelle votre texte est destiné, afin d’obtenir le rendu souhaité. Sur le principe c’est effectivement une bonne chose : on peut garder le contrôle sur l’harmonisation du rendu et sur les polices utilisées. Mais pour cela, il faut partir du principe qu’on ait accès au service qui va afficher ce texte pour lui intégrer les règles CSS qui conviennent.
Il existe en théorie une troisième solution. Sur le principe il est tout à fait possible, au moment de la validation du texte, de changer dans le HTML ces classes spécifiques à Quill par le style inline voulu. Mais bon, nous préférons que ça reste théorique.
Encore une fois, c’est un surnom un peu trompeur que je donne là, en effet c’est surtout parce que je l’ai découvert trop tard pour l’utiliser cette fois-ci. D’ailleurs il suffit de faire un tour sur GitHub pour se rendre compte qu’il est loin d’être discret.
J’ai quand même pris un peu de temps pour le tester après coup. En termes de fonctionnalités, il est à peu près comparable à CKEditor, il propose en plus des plugins premiums pour lesquels il faudra payer, mais qui offrent des services plus poussés.
En mettant en valeur les différences entre ces éditeurs, j’ai pu me faire une idée assez précise des possibilités offertes par chacun. J’aurais tendance à éviter si possible TinyMCE et CKEditor qui, comme dit plus haut, font effectivement parfaitement le travail, mais en font surement trop. Des fonctionnalités maîtrisées et une interface simple sont les clés d’un outil efficace et adapté, et simplifient la prise en main.
Dans le cas d’un besoin basique ne nécessitant pas de mise en forme évoluée (couleur, alignement du texte…), je partirais sur Trix. Il est très simple d’utilisation et j’aime bien la philosophie du projet s’appuyant sur des standards récents comme les Custom Elements.
Dans le cas contraire, le choix entre Quill et Trumbowyg se fera en fonction de vos affinités, un besoin très spécifique pouvant peser dans la balance en faveur de l’un ou l’autre.
J’espère que cette petite liste vous aura aidé à faire un choix. Il faut bien garder en tête que j’ai essayé de noter pour chaque outil ce qui le démarque des autres, de manière à pouvoir cibler le plus intéressant selon le cas d’utilisation, mais il ne faut pas prendre ça pour une liste exhaustive de fonctionnalités.
Bon courage dans vos recherches, n’hésitez pas à nous le dire si vous trouvez la perle rare !
L’équipe Synbioz.
Libres d’être ensemble.
