Les meilleurs éditeurs HTML WYSIWYG gratuits pour le web

L’acronyme signifie « what you see is what you get » (ce que vous voyez est ce que vous obtenez) : l’utilisateur voit le texte déjà mis en forme plutôt que les balises, et peut généralement passer à la vue du code source pour apporter des modifications. On le retrouve dans les interfaces d’administration, les CMS et partout où une personne ne maîtrisant pas le HTML doit publier du contenu.

À l’écran, ils se ressemblent tous ; les différences apparaissent lorsque le projet prend de l’ampleur.

Comment choisir #

• Licence. C’est le premier filtre. Certaines bibliothèques sont passées de licences permissives à des licences copyleft ou commerciales : dans un produit propriétaire, cela peut vous imposer des obligations que vous n’aviez pas prévues.
• Poids. Un éditeur complet peut dépasser quelques centaines de kilo-octets. Cela n’a pas d’importance pour un panneau d’administration interne, mais c’est crucial pour une page publique.
• Propreté du HTML. Le véritable test survient lorsqu’on colle un texte depuis Word : les éditeurs sérieux suppriment le formatage inutile, tandis que les autres laissent tout passer et remplissent la base de données de styles superflus.
• Extensibilité. Chargement d’images, mentions, tableaux, modèles : vérifiez si la fonction dont vous avez besoin est incluse ou s’il s’agit d’un module payant.
• Accessibilité et mobile. Cela ne s’éprouve qu’en conditions réelles : certains éditeurs deviennent inutilisables sur un petit écran.

Les principales options #

CKEditor 5 #

C’est le plus mature du groupe, présent depuis plus de vingt ans : édition collaborative en temps réel, gestion avancée des images, tableaux complets, formules, contrôles d’accessibilité et un copier-coller depuis Word qui fonctionne. Grâce à son architecture par plugins, vous n’incluez que ce dont vous avez besoin.

La licence est double : GPL 2 ou ultérieure pour les projets open source compatibles, ou une licence commerciale qui lève les contraintes du copyleft et débloque les fonctionnalités premium, comme la collaboration, l’exportation vers Word et PDF, ainsi que l’assistant basé sur l’intelligence artificielle.

Si votre produit est propriétaire, vous aurez besoin de la licence commerciale. Depuis la version 44, fin 2024, même l’utilisation sous GPL nécessite d’indiquer une clé de licence ('GPL') dans la configuration.

TinyMCE #

Pendant des années, il a été l’éditeur de référence (il était le moteur du Classic Editor de WordPress), et il reste celui qui possède la documentation et les intégrations prêtes à l’emploi les plus vastes. À savoir : avec la version 7 en 2024, il est passé d’une licence MIT à une licence GPL 2 ou ultérieure. Si vous l’aviez intégré dans un produit propriétaire en comptant sur les anciennes conditions, vérifiez votre situation et, si nécessaire, passez à la licence commerciale.

Ici aussi, les fonctionnalités les plus demandées par les entreprises sont payantes, à commencer par PowerPaste, qui nettoie le texte collé depuis Word et Excel. Cela reste un choix solide, à condition d’étudier la licence avant de se lancer.

Froala #

Il est commercial dès le départ, sans version gratuite pour la production, mais il possède probablement l’interface la plus agréable du groupe : barre d’outils adaptative à l’écran, popups contextuels, tableaux élégants et démarrage ultra-rapide. Si votre budget le permet et que l’expérience utilisateur est primordiale, il mérite un essai.

Quill #

Léger, doté d’une architecture propre et de son propre modèle de document (Delta) plutôt que du simple HTML. Après quelques années d’absence, la version 2.0 est sortie en 2024 ; il est très utilisé dans les applications modernes nécessitant un éditeur prévisible et facile à contrôler par le code.

Il n’a pas la richesse de CKEditor pour les tableaux et contenus complexes, mais pour des commentaires, des descriptions ou des textes de longueur moyenne, il fait largement l’affaire.

Tiptap et Lexical #

Ce sont les deux nouveaux noms que de nombreux développeurs choisissent aujourd’hui. Tiptap s’appuie sur ProseMirror, offre une excellente intégration avec React, Vue et les autres frameworks, et vous permet de construire l’interface de votre choix ; la collaboration et certains modules sont payants. Lexical est l’éditeur développé par Meta, léger et conçu principalement pour React. Les deux demandent plus de travail initial qu’un éditeur « prêt à l’emploi », car c’est à vous que revient la construction de la barre d’outils.

Editor.js #

Il fonctionne différemment des autres : au lieu de produire du HTML, il renvoie une structure en blocs au format JSON. Chaque paragraphe, image ou citation est un bloc avec ses propres données.

C’est un avantage lorsque le contenu doit être réutilisé dans différents contextes (site web, application, newsletter), car c’est vous qui décidez de la présentation lors de l’affichage. C’est un inconvénient si vous avez seulement besoin de HTML à enregistrer et à afficher.

Jodit, Trix et Summernote #

Jodit est écrit en TypeScript sans dépendances et offre un excellent rapport entre légèreté et fonctionnalités, incluant un petit éditeur pour rogner et redimensionner les images. Il est sous licence MIT, avec une version Pro payante pour le gestionnaire de fichiers avancé et d’autres fonctions.

Trix est né dans l’univers Ruby on Rails ; il est volontairement minimaliste et produit un markup très propre.

Summernote s’appuie sur jQuery et Bootstrap et se configure en quelques lignes ; le mode Air masque la barre d’outils et n’affiche les boutons que lorsque vous sélectionnez du texte. C’est le choix rapide pour un panneau d’administration interne, même si les mises à jour sont plus lentes que celles de CKEditor ou TinyMCE.

Trois choses que l’on découvre trop tard #

L’HTML entrant doit être filtré côté serveur. Aucun éditeur ne remplace cette étape : n’importe qui peut envoyer sur votre site du contenu écrit à la main en contournant l’interface. Il est nécessaire d’utiliser une bibliothèque de nettoyage (sanitization) sur le serveur (par exemple HTML Purifier en PHP ou DOMPurify avec Node), sinon vous permettez à quelqu’un d’exécuter du code dans le navigateur des autres visiteurs.

Le téléchargement d’images n’est généralement pas inclus. L’éditeur vous fournit le bouton, mais c’est à vous de coder la partie qui reçoit le fichier (contrôles, redimensionnement, enregistrement).

Le copier-coller depuis Word est l’épreuve décisive. Avant de choisir, collez dans l’éditeur un vrai document rempli de styles et observez le HTML qui en résulte. C’est le test qui distingue les bibliothèques matures des autres.

Comment choisir selon votre projet #

• Site ou application open source : CKEditor 5 ou TinyMCE en version sous licence copyleft.
• Produit commercial propriétaire : Quill, Tiptap, Lexical, Jodit ou Summernote, qui disposent de licences permissives ; ou bien les licences commerciales de CKEditor, TinyMCE ou Froala.
• Panneau d’administration interne à réaliser rapidement : Summernote ou Jodit.
• Contenus structurés destinés à être réutilisés ailleurs : Editor.js.
• Besoin de collaboration en temps réel : CKEditor avec licence commerciale, ou Tiptap avec ses modules payants.
• Application React sur mesure : Lexical ou Tiptap.

Foire aux questions #

Quel est le meilleur éditeur WYSIWYG gratuit ? #

Pour les fonctionnalités de CKEditor 5, à condition que la licence copyleft soit compatible avec votre projet. Si le produit est propriétaire et que vous ne souhaitez pas acheter de licence, Quill est le meilleur compromis entre légèreté, licence permissive et qualité du résultat ; Tiptap si vous êtes prêt à construire votre propre interface.

Ces éditeurs sont-ils sécurisés contre les attaques XSS ? #

Ils aident, mais ne suffisent pas. Les éditeurs filtrent le contenu dans le navigateur, et ce filtre peut être contourné en envoyant les données directement au serveur. Le nettoyage doit être effectué sur le serveur avant l’enregistrement et, idéalement, même avant l’affichage.

Puis-je les utiliser avec React, Vue ou Angular ? #

Oui, les principaux disposent de composants officiels pour les frameworks les plus répandus. Vérifiez toutefois que le composant est bien à jour par rapport à la version du framework que vous utilisez : c’est là que surviennent la plupart des incompatibilités.

Faut-il enregistrer du HTML ou du JSON dans la base de données ? #

L’HTML est immédiat à afficher, mais il lie le contenu à une seule présentation. Le format JSON par blocs, comme celui d’Editor.js, nécessite une étape supplémentaire pour l’affichage mais rend les contenus réutilisables sur différents canaux. Pour un blog, l’HTML convient parfaitement ; pour des contenus destinés à la fois à un site, une application et une newsletter, le format structuré est bien plus rentable.

Un éditeur WYSIWYG alourdit-il beaucoup la page ? #

Cela dépend de la configuration. Avec les bibliothèques modulaires, vous n’incluez que les plugins nécessaires et le poids diminue considérablement. Dans tous les cas, ne chargez l’éditeur que sur les pages où il est nécessaire, pas sur tout le site.

Quel est le meilleur éditeur WYSIWYG pour WordPress ? #

WordPress utilise l’éditeur de blocs Gutenberg, qui n’est pas l’une de ces bibliothèques. L’ancien Classic Editor, toujours disponible via une extension, est basé sur TinyMCE. Les bibliothèques de ce guide vous seront utiles si vous développez votre propre CMS, un panneau d’administration ou une application.

Le HTML produit est-il bon pour le SEO ? #

Si l’éditeur est de qualité et que l’auteur utilise les balises de titres comme des titres et non comme du texte agrandi, alors oui. Le problème survient avec le code collé depuis Word et les <span>documents remplis de styles : gardez un code de sortie propre et, si possible, limitez dans la barre d’outils les options qui génèrent du markup inutile, comme les polices et tailles personnalisées.