Quel framework d’éditeur de texte enrichi choisir en 2025 ?

xguru · 2025-02-10T10:21:01+09:00

Les éditeurs de texte enrichi (WYSIWYG), devenus indispensables dans les applications modernes, sont couramment utilisés par des services comme Linear, Notion et Google Docs Liveblocks a analysé au cours de l’année écoulée plusieurs éditeurs populaires, puis en a résumé les avantages et les inconvénients Les éditeurs se répartissent globalement en deux catégories : les « noyaux » et les solutions « batteries incluses » Si vous n’avez besoin que d’un éditeur simple, mieux vaut choisir une option légère ; pour créer un éditeur complexe avec de nombreuses fonctions collaboratives, il faut envisager une solution très extensible Dans l’ensemble, le choix le plus passe-partout est Tiptap, jugé bien équilibré entre richesse fonctionnelle et absence d’approche trop directive Collaboration Nous (Liveblocks) nous sommes concentrés sur les fonctions collaboratives, et la plupart des éditeurs permettent l’implémentation de la collaboration en temps réel via la bibliothèque CRDT Yjs L’utilisation de Yjs nécessite un service backend capable de stocker les documents et de maintenir les connexions en temps réel Liveblocks fournit un backend Yjs générique utilisable avec plusieurs éditeurs compatibles Yjs, ainsi que des solutions d’intégration pour Tiptap et Lexical Certains éditeurs utilisent aussi leur propre solution basée sur l’OT (Operational Transform) ou des services cloud closed source Points d’attention avant de commencer Sont exclus les éditeurs qui ne sont plus maintenus comme Draft.js, ceux avec une petite communauté, ou encore les éditeurs à code source privé (comme Froala) L’accessibilité (a11y) demande dans la plupart des cas un certain travail, et il faut se référer à la documentation de chaque éditeur Tiptap Éditeur construit sur ProseMirror, qui abstrait la complexité de ProseMirror pour améliorer l’expérience de développement Il est proposé majoritairement sous licence MIT, et permet d’utiliser directement des fonctions de collaboration en temps réel via Tiptap Cloud, Liveblocks, etc. Il offre de nombreuses fonctionnalités, mais sa structure compatible avec le tree shaking permet de garder une taille de bundle cœur plus réduite que Quill, Slate et Lexical Extensions Tiptap est conçu pour faciliter l’ajout de nœuds, de marques, de commandes et d’extensions simples Si nécessaire, il est possible de surcharger le comportement des extensions existantes pour les personnaliser comme on le souhaite Certaines extensions « pro » sont proposées sous forme payante Personnalisation avancée Il peut devenir nécessaire de manipuler directement la structure de ProseMirror Il faut aussi un peu de temps pour se familiariser avec les abstractions propres à Tiptap, comme les command chains Le modèle de données repose sur un schema, généralement généré automatiquement, mais qui peut aussi être manipulé directement pour des fonctions avancées Limites (Drawbacks) Il faut alterner entre la documentation ProseMirror et celle de Tiptap, ce qui peut rendre les bonnes pratiques confuses Les aspects liés à l’accessibilité (a11y) dépendent beaucoup de l’implémentation Une dégradation des performances peut survenir si l’état du document est parcouru inutilement lors des transactions Modifications côté serveur Tiptap seul ne facilite pas la manipulation des documents côté serveur Il faut envisager soit un traitement direct avec ProseMirror, soit une modification directe des documents JSON Liveblocks fournit une bibliothèque qui simplifie un peu plus la modification des documents ProseMirror Collaboration en temps réel Tiptap dispose d’une extension apportant la collaboration en temps réel avec Yjs Il peut s’intégrer à plusieurs solutions cloud comme Tiptap Cloud et Liveblocks Liveblocks Text Editor ajoute, au-delà de la collaboration en temps réel, diverses fonctions comme l’affichage du curseur, les commentaires, les mentions et l’historique des versions Avantages (Pros) Excellente documentation Très bonnes fonctions de collaboration en temps réel Indépendant du framework, avec un package dédié à React Grande extensibilité Intégration possible avec Liveblocks ou Tiptap Cloud Inconvénients (Cons) Risque de baisse des performances si l’on ne suit pas les bonnes pratiques d’usage Nécessité d’apprendre la structure interne de ProseMirror pour développer des fonctions avancées Manque de fonctions d’édition headless côté serveur par défaut BlockNote BlockNote est un éditeur orienté blocs qui étend Tiptap et ProseMirror, avec des fonctions de style Notion Il est principalement développé autour de React, ce qui rend difficile la réutilisation de ses composants UI dans d’autres frameworks Il inclut déjà des fonctions nécessaires comme le menu slash et la barre d’outils flottante, ce qui le rend simple à utiliser Limites BlockNote est open source, mais certaines fonctions comme les exporteurs docx et PDF nécessitent un abonnement payant Collaboration en temps réel Il prend en charge la collaboration basée sur Yjs et Liveblocks Une intégration officielle avec Liveblocks sera bientôt proposée Avantages Repose sur Tiptap et ProseMirror, dont la stabilité est éprouvée Offre des fonctions de collaboration en temps réel via Yjs et Liveblocks Fournit nativement une API d’édition par blocs et des composants UI Inconvénients Principalement conçu pour React Taille de bundle plus importante que celle des éditeurs plus basiques Lexical Éditeur soutenu par Facebook (Meta), qui suscite un fort intérêt Après plusieurs mois passés chez Liveblocks à développer des extensions comme les commentaires, les mentions, l’historique des versions et la collaboration en temps réel, l’impression générale reste qu’il en est encore à ses débuts Il est actuellement en version inférieure à 1.0 et continue d’évoluer rapidement Limites Il ne dispose pas de fonction de « pure decorations », ce qui oblige à superposer séparément des éléments DOM au-dessus de l’éditeur pour implémenter des fonctions comme l’affichage du curseur Le support de base de la collaboration Yjs reste encore fragile dans la gestion des edge cases Un problème existe avec le nom du nœud racine codé en dur, ce qui complique l’usage simultané de plusieurs éditeurs dans un même document Collaboration en temps réel Sauf si l’on utilise le package Liveblocks, l’implémentation de la collaboration dans Lexical est difficile Des exemples comme StickyNotes contournent le problème en créant plusieurs nœuds racine, chacun utilisant son propre document et sa propre connexion socket Les problèmes sont résolus progressivement grâce à un rythme de développement rapide Extensions Lexical Lexical gère les données via une hiérarchie de nœuds Il est possible de créer ses propres nœuds en héritant de 4 types de nœuds cœur Le composant LexicalComposer dédié à React et le package @lexical/react permettent d’accélérer le développement Pour exécuter Lexical sans DOM côté backend, on peut utiliser le package @lexical/headless Modifications côté serveur Il est possible de modifier des documents Lexical côté serveur, et Liveblocks fournit une bibliothèque qui simplifie cela Avantages Prend en charge la collaboration en temps réel avec Yjs Indépendant du framework, avec un package dédié à React Support Liveblocks intégré avec commentaires, mentions et historique des versions Développement très actif et vaste communauté, avec le soutien de Meta Inconvénients La collaboration en temps réel avec Yjs peut provoquer quelques bugs si les edge cases ne sont pas gérés manuellement Les « pure decorations » font défaut et les fonctions avancées nécessitent des contournements via le DOM Le package cœur est plus volumineux que ceux de Tiptap et Slate Slate Framework d’éditeur personnalisable utilisé notamment par Discord, Grafana, Sanity.io et Slite Liveblocks a adopté Slate par défaut pour son propre composeur de commentaires Sa structure de données est simple, offre un contrôle total et peut être utilisée de manière générique au-delà de React Extension de Slate Slate peut être étendu grâce à de nombreux exemples et à sa documentation L’écosystème de plugins est limité, mais l’implémentation directe n’est pas particulièrement difficile Il existe une version plus étendue sous la forme du projet Plate Limites Une taille de bundle légèrement plus importante que Tiptap Peu de fonctionnalités intégrées par défaut, ce qui oblige à en implémenter certaines soi-même Collaboration en temps réel La collaboration en temps réel sur des documents Slate peut être mise en place avec slate-yjs, @liveblocks/yjs, etc. Avantages Excellente documentation Prise en charge de la collaboration en temps réel via Yjs Indépendant du framework, avec un package dédié à React Grande extensibilité Inconvénients Une taille de bundle légèrement supérieure à celle de Tiptap Manque de fonctionnalités fournies par défaut Quill Éditeur utilisé par le passé par Slack, LinkedIn, Figma, Zoom, Miro et Airtable, entre autres Son développement a ralenti pendant un temps, mais la sortie de la version 2 en avril 2024, avec notamment une réécriture en TypeScript, l’a relancé Utilise son propre modèle de document, appelé Parchment, un concept similaire au schéma de ProseMirror Limites Contrairement à Lexical, il ne dispose pas de fonctionnalité de décoration pure, ce qui oblige à superposer des éléments DOM distincts pour des fonctions comme le surlignage coloré ou les curseurs collaboratifs Beaucoup de plugins pour Quill 2 n’ont pas encore été mis à jour L’activité de la communauté peut être un peu plus faible que celle d’autres éditeurs Collaboration en temps réel La collaboration en temps réel peut être mise en place en combinant Yjs et y-quill Pour le backend, différentes approches sont possibles, comme Liveblocks Avantages Excellente documentation Indépendant du framework, avec un package dédié à React Prise en charge de la collaboration en temps réel via Yjs Utilise un format Delta simple Inconvénients Peu de fonctionnalités fournies par défaut et des plugins pas encore tous adaptés à Quill 2 Manque de fonctionnalité de décoration pure Développement relativement moins actif et communauté plus restreinte Une taille de bundle deux fois plus importante que Tiptap ou Slate ProseMirror Framework central qui sert de base à plusieurs éditeurs comme Tiptap, Remirror et BlockNote Son architecture claire autour du schéma, de l’état (state), de la vue (view) et des transformations (transform) garantit un fonctionnement stable Si l’on veut construire un éditeur entièrement depuis zéro avec la seule bibliothèque cœur, la quantité de code devient importante Limites La documentation indique explicitement que même un éditeur simple demande déjà beaucoup de code Il est recommandé d’utiliser des wrappers de plus haut niveau comme Tiptap, Remirror ou BlockNote La courbe d’apprentissage est assez élevée, même si la documentation et la communauté sont bien structurées Avantages Excellente documentation et communauté active Prise en charge de la collaboration en temps réel via Yjs Inconvénients Beaucoup de code nécessaire pour implémenter les exemples de base Manque de fonctionnalités fournies par défaut Courbe d’apprentissage relativement abrupte Plate Projet basé sur Slate, de type « batteries incluses », qui fournit de nombreux plugins riches comme des fonctions d’IA, les mentions ou les commentaires Flexible, car il permet de ne sélectionner que les fonctionnalités nécessaires Propose aussi des templates payants et a été conçu spécifiquement pour React Limites La collaboration ne prend officiellement en charge que Hocuspocus pour le moment, et une implémentation est nécessaire pour le connecter à d’autres backends Yjs comme Liveblocks Conçu uniquement pour React, ce qui peut limiter la compatibilité avec d’autres frameworks Le grand nombre de fonctionnalités tend à augmenter la taille du bundle Avantages Fournit une large bibliothèque de plugins Prise en charge de l’édition côté serveur Propose des templates pour démarrer rapidement Inconvénients Conçu uniquement pour React Les fonctionnalités de collaboration ne sont disponibles que via Hocuspocus Une taille de bundle plus importante que celle des éditeurs plus basiques Remirror Éditeur basé sur ProseMirror, proche de Tiptap mais avec une approche davantage orientée « batteries incluses » Prend en charge plus de 30 plugins, des hooks React, l’internationalisation (i18n) et l’accessibilité (a11y) Open source sous licence MIT, avec des fonctionnalités de collaboration Limites Sa communauté est plus petite que celle de Tiptap et les mises à jour peuvent être plus lentes Il comporte beaucoup de fonctionnalités spécifiques à React, ce qui peut imposer des contraintes dans d’autres environnements Sa taille de bundle est plutôt importante Collaboration en temps réel Remirror prend en charge la collaboration avec Yjs et Liveblocks via YjsExtension Avantages Excellente documentation Fournit une large bibliothèque de plugins Prise en charge de la collaboration via Yjs et Liveblocks Inconvénients Conçu uniquement pour React Taille de bundle plus importante Fréquence de mise à jour faible et petite communauté Editor.js Éditeur de texte enrichi prenant en charge l’édition par blocs, avec de nombreux plugins et une grande communauté Sa structure de données s’organise autour des blocs, de l’inline et des tunes Indépendant du framework, avec plusieurs fonctionnalités pratiques intégrées comme les info-bulles Limites Il n’existe pas de prise en charge officielle de la collaboration en temps réel, et certains PR ont bien été tentés, mais leur maintenance reste incertaine Même le package de base a tendance à être volumineux Collaboration en temps réel Non prise en charge officiellement Avantages Fournit une riche bibliothèque de plugins avec de nombreuses fonctionnalités Intégrations communautaires avec divers CMS et frameworks backend Inconvénients Taille de bundle plus importante Absence de collaboration en temps réel CKEditor Éditeur avec plus de 20 ans d’histoire, dont la version actuelle (5) propose une architecture moderne et des fonctionnalités riches Prend en charge différents frameworks comme Angular, React, Vue et Next Distribué sous licence GPL-2, ce qui peut imposer l’open source dans certaines situations, tandis qu’un usage commercial nécessite l’achat d’une licence distincte Limites Une part importante des plugins est payante, et les fonctionnalités de collaboration ne sont disponibles qu’avec le service cloud de CKEditor La licence GPL-2 et la tarification basée sur le nombre de chargements peuvent constituer un frein pour de nombreux utilisateurs Collaboration en temps réel Aucune autre solution de collaboration n’est proposée en dehors du service cloud propriétaire de CKEditor Avantages Fonctionnalités très riches dès la base Compatible avec de nombreux frameworks Inconvénients Les fonctionnalités de collaboration dépendent du service cloud de CKEditor La licence GPL-2 peut être contraignante pour certains utilisateurs Certaines fonctionnalités sont proposées avec une tarification à l’usage TinyMCE Comme CKEditor, c’est un éditeur avec plus de 20 ans d’histoire, distribué sous licence GPL-2 Peut être utilisé dans différents environnements comme Angular, React et Vue Il existe un service cloud de collaboration facturé selon le nombre de chargements Limites Des fonctionnalités majeures comme le Markdown, les mentions, les commentaires ou la typographie avancée sont proposées sous forme de plugins payants La documentation sur les moyens de manipuler les documents côté serveur est insuffisante Collaboration en temps réel En dehors de la solution de collaboration propriétaire de TinyMCE, aucune autre méthode n’est rendue publique Avantages Fonctionnalités très riches dès la base Compatible avec de nombreux frameworks Inconvénients Les fonctionnalités de collaboration dépendent du service Tiny Cloud La licence GPL-2 peut être contraignante pour certains utilisateurs Certaines fonctionnalités sont proposées avec une tarification à l’usage Résumé comparatif des éditeurs ProseMirror Framework : Vanilla Collaboration : Yjs Comments : non fourni (avec des exemples) Mentions : plugin Suggestion utilisable Server-side editing : modification de documents possible dans Node.js avec prosemirror-state et prosemirror-model License : MIT GitHub Stars : ⭐ 7.8k Tiptap Framework : Vanilla, React, Vue, Svelte Collaboration : Liveblocks, Tiptap Cloud, Yjs Comments : possible sans configuration via l’intégration avec Liveblocks, personnalisable Mentions : possible sans configuration via l’intégration avec Liveblocks, personnalisable Server-side editing : possible via ProseMirror ou le package Node.js ProseMirror de Liveblocks License : MIT GitHub Stars : ⭐ 20k Remirror Framework : React Collaboration : Yjs Comments : possible Mentions : possible Server-side editing : possible via ProseMirror ou le package Node.js ProseMirror de Liveblocks License : MIT GitHub Stars : ⭐ 2.8k BlockNote Framework : React Collaboration : Yjs Comments : possible via Liveblocks ou des exemples personnalisés Mentions : possible Server-side editing : possible via ProseMirror ou le package Node.js ProseMirror de Liveblocks License : MPL 2 GitHub Stars : ⭐ 7.1k Lexical Framework : Vanilla, React, iOS, autres Collaboration : Liveblocks, Yjs Comments : possible sans configuration via l’intégration avec Liveblocks, personnalisable Mentions : possible sans configuration via l’intégration avec Liveblocks, personnalisable Server-side editing : possible via Lexical ou le package Node.js Lexical de Liveblocks License : MIT GitHub Stars : ⭐ 20k Slate Framework : Vanilla, React Collaboration : Yjs Comments : non fourni (avec des exemples) Mentions : avec des exemples Server-side editing : non fourni License : MIT GitHub Stars : ⭐ 30k Plate Framework : React uniquement Collaboration : Hocuspocus (Yjs) Comments : possible Mentions : possible Server-side editing : possible License : MIT GitHub Stars : ⭐ 13k Quill Framework : Vanilla Collaboration : Yjs Comments : non fourni (avec des exemples) Mentions : utilisation possible de bibliothèques tierces Server-side editing : non fourni License : BSD-3 GitHub Stars : ⭐ 45k Editor.js Framework : Vanilla Collaboration : non pris en charge (avec des exemples tiers) Comments : non fourni (avec des bibliothèques tierces) Mentions : non fourni (avec des exemples) Server-side editing : non fourni License : Apache 2 GitHub Stars : ⭐ 28k CKEditor Framework : Vanilla, React, Vue, Angular Collaboration : intégré avec CKEditor Cloud Comments : possible Mentions : possible Server-side editing : possible License : GPL-2+ GitHub Stars : ⭐ 8.8k TinyMCE Framework : Vanilla, React, Vue, Angular, autres Collaboration : intégré avec Tiny Cloud Comments : intégré avec Tiny Cloud Mentions : possible Server-side editing : non fourni License : GPL-2+ GitHub Stars : ⭐ 15k

(liveblocks.io)

65 points par xguru 2025-02-10 | 14 commentaires | Partager sur WhatsApp

Les éditeurs de texte enrichi (WYSIWYG), devenus indispensables dans les applications modernes, sont couramment utilisés par des services comme Linear, Notion et Google Docs
Liveblocks a analysé au cours de l’année écoulée plusieurs éditeurs populaires, puis en a résumé les avantages et les inconvénients
Les éditeurs se répartissent globalement en deux catégories : les « noyaux » et les solutions « batteries incluses »
Si vous n’avez besoin que d’un éditeur simple, mieux vaut choisir une option légère ; pour créer un éditeur complexe avec de nombreuses fonctions collaboratives, il faut envisager une solution très extensible
Dans l’ensemble, le choix le plus passe-partout est Tiptap, jugé bien équilibré entre richesse fonctionnelle et absence d’approche trop directive
Collaboration
- Nous (Liveblocks) nous sommes concentrés sur les fonctions collaboratives, et la plupart des éditeurs permettent l’implémentation de la collaboration en temps réel via la bibliothèque CRDT Yjs
- L’utilisation de Yjs nécessite un service backend capable de stocker les documents et de maintenir les connexions en temps réel
- Liveblocks fournit un backend Yjs générique utilisable avec plusieurs éditeurs compatibles Yjs, ainsi que des solutions d’intégration pour Tiptap et Lexical
- Certains éditeurs utilisent aussi leur propre solution basée sur l’OT (Operational Transform) ou des services cloud closed source
Points d’attention avant de commencer
- Sont exclus les éditeurs qui ne sont plus maintenus comme Draft.js, ceux avec une petite communauté, ou encore les éditeurs à code source privé (comme Froala)
- L’accessibilité (a11y) demande dans la plupart des cas un certain travail, et il faut se référer à la documentation de chaque éditeur

Tiptap

Éditeur construit sur ProseMirror, qui abstrait la complexité de ProseMirror pour améliorer l’expérience de développement
Il est proposé majoritairement sous licence MIT, et permet d’utiliser directement des fonctions de collaboration en temps réel via Tiptap Cloud, Liveblocks, etc.
Il offre de nombreuses fonctionnalités, mais sa structure compatible avec le tree shaking permet de garder une taille de bundle cœur plus réduite que Quill, Slate et Lexical
Extensions
- Tiptap est conçu pour faciliter l’ajout de nœuds, de marques, de commandes et d’extensions simples
- Si nécessaire, il est possible de surcharger le comportement des extensions existantes pour les personnaliser comme on le souhaite
- Certaines extensions « pro » sont proposées sous forme payante
Personnalisation avancée
- Il peut devenir nécessaire de manipuler directement la structure de ProseMirror
- Il faut aussi un peu de temps pour se familiariser avec les abstractions propres à Tiptap, comme les command chains
- Le modèle de données repose sur un schema, généralement généré automatiquement, mais qui peut aussi être manipulé directement pour des fonctions avancées
Limites (Drawbacks)
- Il faut alterner entre la documentation ProseMirror et celle de Tiptap, ce qui peut rendre les bonnes pratiques confuses
- Les aspects liés à l’accessibilité (a11y) dépendent beaucoup de l’implémentation
- Une dégradation des performances peut survenir si l’état du document est parcouru inutilement lors des transactions
Modifications côté serveur
- Tiptap seul ne facilite pas la manipulation des documents côté serveur
- Il faut envisager soit un traitement direct avec ProseMirror, soit une modification directe des documents JSON
- Liveblocks fournit une bibliothèque qui simplifie un peu plus la modification des documents ProseMirror
Collaboration en temps réel
- Tiptap dispose d’une extension apportant la collaboration en temps réel avec Yjs
- Il peut s’intégrer à plusieurs solutions cloud comme Tiptap Cloud et Liveblocks
- Liveblocks Text Editor ajoute, au-delà de la collaboration en temps réel, diverses fonctions comme l’affichage du curseur, les commentaires, les mentions et l’historique des versions
Avantages (Pros)
- Excellente documentation
- Très bonnes fonctions de collaboration en temps réel
- Indépendant du framework, avec un package dédié à React
- Grande extensibilité
- Intégration possible avec Liveblocks ou Tiptap Cloud
Inconvénients (Cons)
- Risque de baisse des performances si l’on ne suit pas les bonnes pratiques d’usage
- Nécessité d’apprendre la structure interne de ProseMirror pour développer des fonctions avancées
- Manque de fonctions d’édition headless côté serveur par défaut

BlockNote

BlockNote est un éditeur orienté blocs qui étend Tiptap et ProseMirror, avec des fonctions de style Notion
Il est principalement développé autour de React, ce qui rend difficile la réutilisation de ses composants UI dans d’autres frameworks
Il inclut déjà des fonctions nécessaires comme le menu slash et la barre d’outils flottante, ce qui le rend simple à utiliser
Limites
- BlockNote est open source, mais certaines fonctions comme les exporteurs docx et PDF nécessitent un abonnement payant
Collaboration en temps réel
- Il prend en charge la collaboration basée sur Yjs et Liveblocks
- Une intégration officielle avec Liveblocks sera bientôt proposée
Avantages
- Repose sur Tiptap et ProseMirror, dont la stabilité est éprouvée
- Offre des fonctions de collaboration en temps réel via Yjs et Liveblocks
- Fournit nativement une API d’édition par blocs et des composants UI
Inconvénients
- Principalement conçu pour React
- Taille de bundle plus importante que celle des éditeurs plus basiques

Lexical

Éditeur soutenu par Facebook (Meta), qui suscite un fort intérêt
Après plusieurs mois passés chez Liveblocks à développer des extensions comme les commentaires, les mentions, l’historique des versions et la collaboration en temps réel, l’impression générale reste qu’il en est encore à ses débuts
Il est actuellement en version inférieure à 1.0 et continue d’évoluer rapidement
Limites
- Il ne dispose pas de fonction de « pure decorations », ce qui oblige à superposer séparément des éléments DOM au-dessus de l’éditeur pour implémenter des fonctions comme l’affichage du curseur
- Le support de base de la collaboration Yjs reste encore fragile dans la gestion des edge cases
- Un problème existe avec le nom du nœud racine codé en dur, ce qui complique l’usage simultané de plusieurs éditeurs dans un même document
Collaboration en temps réel
- Sauf si l’on utilise le package Liveblocks, l’implémentation de la collaboration dans Lexical est difficile
- Des exemples comme StickyNotes contournent le problème en créant plusieurs nœuds racine, chacun utilisant son propre document et sa propre connexion socket
- Les problèmes sont résolus progressivement grâce à un rythme de développement rapide
Extensions Lexical
- Lexical gère les données via une hiérarchie de nœuds
- Il est possible de créer ses propres nœuds en héritant de 4 types de nœuds cœur
- Le composant LexicalComposer dédié à React et le package @lexical/react permettent d’accélérer le développement
- Pour exécuter Lexical sans DOM côté backend, on peut utiliser le package @lexical/headless
Modifications côté serveur
- Il est possible de modifier des documents Lexical côté serveur, et Liveblocks fournit une bibliothèque qui simplifie cela
Avantages
- Prend en charge la collaboration en temps réel avec Yjs
- Indépendant du framework, avec un package dédié à React
- Support Liveblocks intégré avec commentaires, mentions et historique des versions
- Développement très actif et vaste communauté, avec le soutien de Meta
Inconvénients
- La collaboration en temps réel avec Yjs peut provoquer quelques bugs si les edge cases ne sont pas gérés manuellement
- Les « pure decorations » font défaut et les fonctions avancées nécessitent des contournements via le DOM
- Le package cœur est plus volumineux que ceux de Tiptap et Slate

Slate

Framework d’éditeur personnalisable utilisé notamment par Discord, Grafana, Sanity.io et Slite
Liveblocks a adopté Slate par défaut pour son propre composeur de commentaires
Sa structure de données est simple, offre un contrôle total et peut être utilisée de manière générique au-delà de React
Extension de Slate
- Slate peut être étendu grâce à de nombreux exemples et à sa documentation
- L’écosystème de plugins est limité, mais l’implémentation directe n’est pas particulièrement difficile
- Il existe une version plus étendue sous la forme du projet Plate
Limites
- Une taille de bundle légèrement plus importante que Tiptap
- Peu de fonctionnalités intégrées par défaut, ce qui oblige à en implémenter certaines soi-même
Collaboration en temps réel
- La collaboration en temps réel sur des documents Slate peut être mise en place avec slate-yjs, @liveblocks/yjs, etc.
Avantages
- Excellente documentation
- Prise en charge de la collaboration en temps réel via Yjs
- Indépendant du framework, avec un package dédié à React
- Grande extensibilité
Inconvénients
- Une taille de bundle légèrement supérieure à celle de Tiptap
- Manque de fonctionnalités fournies par défaut

Quill

Éditeur utilisé par le passé par Slack, LinkedIn, Figma, Zoom, Miro et Airtable, entre autres
Son développement a ralenti pendant un temps, mais la sortie de la version 2 en avril 2024, avec notamment une réécriture en TypeScript, l’a relancé
Utilise son propre modèle de document, appelé Parchment, un concept similaire au schéma de ProseMirror
Limites
- Contrairement à Lexical, il ne dispose pas de fonctionnalité de décoration pure, ce qui oblige à superposer des éléments DOM distincts pour des fonctions comme le surlignage coloré ou les curseurs collaboratifs
- Beaucoup de plugins pour Quill 2 n’ont pas encore été mis à jour
- L’activité de la communauté peut être un peu plus faible que celle d’autres éditeurs
Collaboration en temps réel
- La collaboration en temps réel peut être mise en place en combinant Yjs et y-quill
- Pour le backend, différentes approches sont possibles, comme Liveblocks
Avantages
- Excellente documentation
- Indépendant du framework, avec un package dédié à React
- Prise en charge de la collaboration en temps réel via Yjs
- Utilise un format Delta simple
Inconvénients
- Peu de fonctionnalités fournies par défaut et des plugins pas encore tous adaptés à Quill 2
- Manque de fonctionnalité de décoration pure
- Développement relativement moins actif et communauté plus restreinte
- Une taille de bundle deux fois plus importante que Tiptap ou Slate

ProseMirror

Framework central qui sert de base à plusieurs éditeurs comme Tiptap, Remirror et BlockNote
Son architecture claire autour du schéma, de l’état (state), de la vue (view) et des transformations (transform) garantit un fonctionnement stable
Si l’on veut construire un éditeur entièrement depuis zéro avec la seule bibliothèque cœur, la quantité de code devient importante
Limites
- La documentation indique explicitement que même un éditeur simple demande déjà beaucoup de code
- Il est recommandé d’utiliser des wrappers de plus haut niveau comme Tiptap, Remirror ou BlockNote
- La courbe d’apprentissage est assez élevée, même si la documentation et la communauté sont bien structurées
Avantages
- Excellente documentation et communauté active
- Prise en charge de la collaboration en temps réel via Yjs
Inconvénients
- Beaucoup de code nécessaire pour implémenter les exemples de base
- Manque de fonctionnalités fournies par défaut
- Courbe d’apprentissage relativement abrupte

Plate

Projet basé sur Slate, de type « batteries incluses », qui fournit de nombreux plugins riches comme des fonctions d’IA, les mentions ou les commentaires
Flexible, car il permet de ne sélectionner que les fonctionnalités nécessaires
Propose aussi des templates payants et a été conçu spécifiquement pour React
Limites
- La collaboration ne prend officiellement en charge que Hocuspocus pour le moment, et une implémentation est nécessaire pour le connecter à d’autres backends Yjs comme Liveblocks
- Conçu uniquement pour React, ce qui peut limiter la compatibilité avec d’autres frameworks
- Le grand nombre de fonctionnalités tend à augmenter la taille du bundle
Avantages
- Fournit une large bibliothèque de plugins
- Prise en charge de l’édition côté serveur
- Propose des templates pour démarrer rapidement
Inconvénients
- Conçu uniquement pour React
- Les fonctionnalités de collaboration ne sont disponibles que via Hocuspocus
- Une taille de bundle plus importante que celle des éditeurs plus basiques

Remirror

Éditeur basé sur ProseMirror, proche de Tiptap mais avec une approche davantage orientée « batteries incluses »
Prend en charge plus de 30 plugins, des hooks React, l’internationalisation (i18n) et l’accessibilité (a11y)
Open source sous licence MIT, avec des fonctionnalités de collaboration
Limites
- Sa communauté est plus petite que celle de Tiptap et les mises à jour peuvent être plus lentes
- Il comporte beaucoup de fonctionnalités spécifiques à React, ce qui peut imposer des contraintes dans d’autres environnements
- Sa taille de bundle est plutôt importante
Collaboration en temps réel
- Remirror prend en charge la collaboration avec Yjs et Liveblocks via YjsExtension
Avantages
- Excellente documentation
- Fournit une large bibliothèque de plugins
- Prise en charge de la collaboration via Yjs et Liveblocks
Inconvénients
- Conçu uniquement pour React
- Taille de bundle plus importante
- Fréquence de mise à jour faible et petite communauté

Editor.js

Éditeur de texte enrichi prenant en charge l’édition par blocs, avec de nombreux plugins et une grande communauté
Sa structure de données s’organise autour des blocs, de l’inline et des tunes
Indépendant du framework, avec plusieurs fonctionnalités pratiques intégrées comme les info-bulles
Limites
- Il n’existe pas de prise en charge officielle de la collaboration en temps réel, et certains PR ont bien été tentés, mais leur maintenance reste incertaine
- Même le package de base a tendance à être volumineux
Collaboration en temps réel
- Non prise en charge officiellement
Avantages
- Fournit une riche bibliothèque de plugins avec de nombreuses fonctionnalités
- Intégrations communautaires avec divers CMS et frameworks backend
Inconvénients
- Taille de bundle plus importante
- Absence de collaboration en temps réel

CKEditor

Éditeur avec plus de 20 ans d’histoire, dont la version actuelle (5) propose une architecture moderne et des fonctionnalités riches
Prend en charge différents frameworks comme Angular, React, Vue et Next
Distribué sous licence GPL-2, ce qui peut imposer l’open source dans certaines situations, tandis qu’un usage commercial nécessite l’achat d’une licence distincte
Limites
- Une part importante des plugins est payante, et les fonctionnalités de collaboration ne sont disponibles qu’avec le service cloud de CKEditor
- La licence GPL-2 et la tarification basée sur le nombre de chargements peuvent constituer un frein pour de nombreux utilisateurs
Collaboration en temps réel
- Aucune autre solution de collaboration n’est proposée en dehors du service cloud propriétaire de CKEditor
Avantages
- Fonctionnalités très riches dès la base
- Compatible avec de nombreux frameworks
Inconvénients
- Les fonctionnalités de collaboration dépendent du service cloud de CKEditor
- La licence GPL-2 peut être contraignante pour certains utilisateurs
- Certaines fonctionnalités sont proposées avec une tarification à l’usage

TinyMCE

Comme CKEditor, c’est un éditeur avec plus de 20 ans d’histoire, distribué sous licence GPL-2
Peut être utilisé dans différents environnements comme Angular, React et Vue
Il existe un service cloud de collaboration facturé selon le nombre de chargements
Limites
- Des fonctionnalités majeures comme le Markdown, les mentions, les commentaires ou la typographie avancée sont proposées sous forme de plugins payants
- La documentation sur les moyens de manipuler les documents côté serveur est insuffisante
Collaboration en temps réel
- En dehors de la solution de collaboration propriétaire de TinyMCE, aucune autre méthode n’est rendue publique
Avantages
- Fonctionnalités très riches dès la base
- Compatible avec de nombreux frameworks
Inconvénients
- Les fonctionnalités de collaboration dépendent du service Tiny Cloud
- La licence GPL-2 peut être contraignante pour certains utilisateurs
- Certaines fonctionnalités sont proposées avec une tarification à l’usage

Résumé comparatif des éditeurs

ProseMirror
- Framework : Vanilla
- Collaboration : Yjs
- Comments : non fourni (avec des exemples)
- Mentions : plugin Suggestion utilisable
- Server-side editing : modification de documents possible dans Node.js avec prosemirror-state et prosemirror-model
- License : MIT
- GitHub Stars : ⭐ 7.8k
Tiptap
- Framework : Vanilla, React, Vue, Svelte
- Collaboration : Liveblocks, Tiptap Cloud, Yjs
- Comments : possible sans configuration via l’intégration avec Liveblocks, personnalisable
- Mentions : possible sans configuration via l’intégration avec Liveblocks, personnalisable
- Server-side editing : possible via ProseMirror ou le package Node.js ProseMirror de Liveblocks
- License : MIT
- GitHub Stars : ⭐ 20k
Remirror
- Framework : React
- Collaboration : Yjs
- Comments : possible
- Mentions : possible
- Server-side editing : possible via ProseMirror ou le package Node.js ProseMirror de Liveblocks
- License : MIT
- GitHub Stars : ⭐ 2.8k
BlockNote
- Framework : React
- Collaboration : Yjs
- Comments : possible via Liveblocks ou des exemples personnalisés
- Mentions : possible
- Server-side editing : possible via ProseMirror ou le package Node.js ProseMirror de Liveblocks
- License : MPL 2
- GitHub Stars : ⭐ 7.1k
Lexical
- Framework : Vanilla, React, iOS, autres
- Collaboration : Liveblocks, Yjs
- Comments : possible sans configuration via l’intégration avec Liveblocks, personnalisable
- Mentions : possible sans configuration via l’intégration avec Liveblocks, personnalisable
- Server-side editing : possible via Lexical ou le package Node.js Lexical de Liveblocks
- License : MIT
- GitHub Stars : ⭐ 20k
Slate
- Framework : Vanilla, React
- Collaboration : Yjs
- Comments : non fourni (avec des exemples)
- Mentions : avec des exemples
- Server-side editing : non fourni
- License : MIT
- GitHub Stars : ⭐ 30k
Plate
- Framework : React uniquement
- Collaboration : Hocuspocus (Yjs)
- Comments : possible
- Mentions : possible
- Server-side editing : possible
- License : MIT
- GitHub Stars : ⭐ 13k
Quill
- Framework : Vanilla
- Collaboration : Yjs
- Comments : non fourni (avec des exemples)
- Mentions : utilisation possible de bibliothèques tierces
- Server-side editing : non fourni
- License : BSD-3
- GitHub Stars : ⭐ 45k
Editor.js
- Framework : Vanilla
- Collaboration : non pris en charge (avec des exemples tiers)
- Comments : non fourni (avec des bibliothèques tierces)
- Mentions : non fourni (avec des exemples)
- Server-side editing : non fourni
- License : Apache 2
- GitHub Stars : ⭐ 28k
CKEditor
- Framework : Vanilla, React, Vue, Angular
- Collaboration : intégré avec CKEditor Cloud
- Comments : possible
- Mentions : possible
- Server-side editing : possible
- License : GPL-2+
- GitHub Stars : ⭐ 8.8k
TinyMCE
- Framework : Vanilla, React, Vue, Angular, autres
- Collaboration : intégré avec Tiny Cloud
- Comments : intégré avec Tiny Cloud
- Mentions : possible
- Server-side editing : non fourni
- License : GPL-2+
- GitHub Stars : ⭐ 15k

14 commentaires

bingo992000 2025-03-15

Appliquer QuillJS à un projet SvelteKit a été assez pénible. Avec React, il existe au moins des bibliothèques, donc c’était un peu plus simple.

firea32 2025-02-17

Au final, tiptap, avec lequel il est facile de développer des composants React personnalisés, est ce qu’il y a de mieux.

vb6ko 2025-02-11

Moi aussi, je m’étais renseigné récemment, donc merci pour ce récapitulatif bien organisé.

Pour le coréen, certains éditeurs ont des petits bugs de saisie sur mobile.
Quand on saisit <동해물과>, cela peut être entré comme <ㄷㅗㅇㅎㅐㅁㅜㄹㄱㅗㅏ>
ou, en saisissant <동해물과>, cela peut devenir <동동해해물물과과>.
(Référence : https://github.com/ckeditor/ckeditor5/issues/13693)

De mon côté, je n’utilise pas de framework comme React ou Vue, et comme j’étais réticent à acheter une licence d’éditeur, mes options étaient très limitées.

J’ai donc aussi regardé les quatre solutions ci-dessous, en plus de celles mentionnées dans l’article.

https://trix-editor.org/
C’est un éditeur créé par 37signals, l’entreprise menée par DHH de Ruby on Rails. Il est développé en JavaScript pur (c’est-à-dire sans React, etc.) et il n’était pas trop difficile à personnaliser. (par exemple, transformer automatiquement un lien YouTube collé en embed YouTube)

https://ui.toast.com/tui-editor
C’est un outil créé par NHN Cloud.

https://naver.github.io/smarteditor2/demo/
C’est Naver SmartEditor2. C’est classique, mais pour un service destiné aux Coréens, je trouvais qu’il pouvait bénéficier de cette familiarité appréciée.

https://summernote.org/
C’est Summernote, développé par un Coréen. C’est celui que j’ai choisi. Avec un thème appliqué, il devient assez élégant. Il intègre aussi nativement des fonctionnalités pensées comme les attendent les Coréens, ce qui le rend pratique. (comme la conversion en embed du lien YouTube mentionnée plus haut) En revanche, je voulais le styliser avec tailwind prose, mais il avait ses propres styles de typographie, donc j’ai dû un peu bricoler.

teddy418 2025-02-11

J’aimerais apporter une correction concernant le deuxième outil : tui editor n’est pas un projet open source développé par Toss, mais par nhncloud.

vb6ko 2025-02-12

Oui, vous avez raison, je corrige (je ne sais pas où se trouve la modification..).

moderator 2025-02-16

Corrigé en nhncloud.

carnoxen 2025-02-14

À l’origine, il n’y a pas de modification sur ce site. Seul l’administrateur peut effectuer des modifications.

carnoxen 2025-02-10

Même s’il n’est pas mentionné ici, j’aimerais que WordPress Gutenberg soit publié comme une bibliothèque indépendante.

imjlk 2025-02-11

https://github.com/Automattic/isolated-block-editor
C’est mentionné, mais comparé à ceux présentés dans l’article, les cas d’usage sont nettement plus limités.

carnoxen 2025-02-11

Oh ! Donc Automattic l’archivait sous un autre nom. C’était ma fonctionnalité préférée à l’époque où j’utilisais WordPress au travail.

winterjung 2025-02-10

Le lien renvoie vers le blog de liveblocks.io, mais l’URL d’aperçu affiche (github.com/US-Artificial-Intelligence) ?

xguru 2025-02-10

En publiant mon message, j'avais laissé telle quelle l'URL du message précédent, ce qui a causé un problème lors de la modification. C'est corrigé.

tsboard 2025-02-10

J’ai utilisé tiptap pour la première fois sur un projet, et par rapport à d’autres éditeurs plus traditionnels, j’en suis satisfait car la documentation, les fonctionnalités et l’implémentation étaient toutes excellentes. J’ai beaucoup aimé pouvoir ne prendre que ce dont j’avais besoin et concevoir l’UI exactement à mon goût, mais il y a quand même un point qui m’a semblé assez lourd : la charge de travail pour le personnaliser à ce niveau était loin d’être anodine... !

babadudu 2026-03-30

TinyMce est bien.