Il s'avère que je devais aussi créer KuroEditor (Pleurs) Vol. 1

Attendez, il n'y a pas d'éditeur ?!

À mi-chemin du développement de KuroCMS, Kuroto s'est soudainement rappelé l'immense effort et le temps consacrés à la configuration d'un éditeur décent dans Strapi, et s'est figé. Si mes cheveux étaient devenus blancs, je serais peut-être devenu un lapin panda.

Bien que ces éditeurs ne fonctionnent pas pour Strapi, j'ai commencé à faire des recherches dans l'espoir de trouver ailleurs un éditeur répondant à mes exigences... mais je n'en ai pas trouvé. Pas possible, dis-moi que ce n'est pas vrai, Chappy ! (ChatGPT)

Recherche exclusivement sous licence MIT

Comme je prévoyais de le packager et de le distribuer avec KuroCMS, disposer d'un éditeur sous licence MIT était évidemment l'option la plus pratique.

D'après mes recherches, il semble que la tendance actuelle pour les éditeurs web soit complètement dominée par les options headless — où l'on n'emprunte que la logique pour construire soi-même l'interface utilisateur. Tout comme les CMS headless.

Les 5 éditeurs les mieux notés au monde

【TipTap】

1. Selon les rapports, le numéro un incontesté. Extrêmement flexible, prend en charge React/Vue et produit du HTML / JSON.
2. Un éditeur headless. Vous pouvez adapter entièrement le design des boutons et la disposition des barres d'outils à l'interface de votre application. Il repose sur le puissant moteur ProseMirror.
3. Base d'utilisateurs : plus de 37 000 étoiles sur GitHub et plus de 8 millions de téléchargements hebdomadaires. Pratiquement la norme mondiale.
4. Comment l'intégrer : Installez-le via `npm install @tiptap/react` et contrôlez-le à l'aide du hook `useEditor`.

【Editor.js】

1. Base de fans enthousiastes, réputé intuitif avec une expérience semblable à Notion, basé sur des plugins, produit du JSON (données structurées).
2. Caractéristiques : Traite tout comme un bloc (paragraphes, images, titres). Sensation d'utilisation similaire à Notion.
3. Génère du JSON propre au lieu du HTML, ce qui le rend idéal pour afficher les mêmes données sur le Web, les applications mobiles, les montres connectées, etc.
4. Comment l'intégrer : Chargez le package principal et les outils individuels (Image, En-tête, etc.) séparément, puis initialisez avec `new EditorJS()`.

【Lexical】

1. En croissance rapide, rapide, léger, robuste, conçu par Meta, axé sur le design, produit du HTML / JSON.
2. Spécialisé dans les performances et l'accessibilité. Extrêmement léger, ce qui permet de maintenir la rapidité des applications, même à grande échelle.
3. Base d'utilisateurs : En augmentation rapide. Fonctionne bien avec le contenu généré par l'IA et est fréquemment adopté pour les éditeurs d'IA.
4. Caractéristiques : Offre une gestion d'état avancée et un modèle de données arborescent. Entièrement conforme aux normes d'accessibilité WCAG.
5. Comment l'intégrer : Intégrer en tant que plugin React. Définissez des "nœuds" (nodes) nommés pour construire l'éditeur.

【Slate】 (Le framework le plus puissant exclusif à React)

1. Conçu pour les développeurs, personnalisation ultime, réservé à React, produit du JSON (arbitraire).
2. Caractéristiques : Plutôt qu'un éditeur, c'est une bibliothèque pour construire des éditeurs. Vous pouvez définir entièrement votre propre modèle de document.
3. Base d'utilisateurs : Fort soutien au sein de la communauté React (plus de 31 000 étoiles sur GitHub).
4. Caractéristiques : Performant pour gérer des documents aux structures imbriquées complexes (par exemple, des listes dans des tableaux, des images dans des listes).
5. Comment l'intégrer : Créez à l'aide d'une approche orientée composants. Écrivez des fonctions personnalisées comme `renderElement` pour contrôler le rendu.

【Milkdown】 (WYSIWYG spécialisé pour Markdown)

1. Fort pour des cas d'utilisation spécifiques | Associe Markdown et fonctionnement visuel | Difficulté faible à moyenne | Produit du Markdown / HTML
2. Caractéristiques : Offre une expérience de type Typora où le Markdown est formaté en temps réel à mesure de la saisie.
3. Base d'utilisateurs : Spécialisé pour les développeurs et la documentation technique.
4. Caractéristiques : Puissantes extensions Markdown via des plugins. Prend en charge les symboles mathématiques (LaTeX) et les diagrammes (Mermaid).
5. Comment l'intégrer : Développé en TypeScript ; initialisez en passant les plugins requis dans un tableau.

Alors, qu'en est-il de ces cinq ?

J'ai essayé d'utiliser TipTap et Lexical comme éditeurs pour Strapi, mais cela n'a pas fonctionné du tout... Lexical ne gérait pas correctement les images, et TipTap avait également des problèmes. Aucun d'entre eux ne se rapprochait du WYSIWYG (ce qui signifie que vous pouvez modifier dans l'éditeur exactement comme cela apparaîtra dans le résultat final) que Kuroto souhaitait. Editor.js était fondamentalement la même chose ; un éditeur uniquement JSON ne peut pas offrir de véritable WYSIWYG. Ils conviennent peut-être si vous tapez simplement du texte et du code en continu. Quant à Milkdown, il ne mentionne même pas les images — autant utiliser LaTeX. Et honnêtement, Kuroto n'aime vraiment pas React. Toutes mes excuses à Meta (sueur). À la limite, j'utiliserais Vue si un framework était nécessaire, mais je ne jure que par Astro ! En y repensant, il y avait autrefois un manga appelé Astro Kyudan.

Finalement, je me suis rappelé que Quill + better-table, que j'utilisais dans Strapi, était la meilleure option. Cependant, je ne pouvais tout simplement pas accepter l'implémentation de la table, ahah. C'est alors que le petit démon dans mon esprit a dit : "Si tu te plains à ce point, construis-le toi-même !" En effet, vous avez raison. Toutes mes excuses.

Et c'est ainsi que le développement de KuroEditor a commencé

Je n'avais pas besoin d'un éditeur ultra-performant. Je voulais juste un WYSIWYG et un outil de tableau utilisable sans stress, similaire à Dropbox Paper ! Porté par ce cri intérieur, j'ai décidé de le construire moi-même. Je partagerai les détails de l'éditeur réalisé par Kuroto dans le prochain article. Il est presque terminé, et une fois que j'aurai fini de le tester tout en écrivant ces articles et que j'aurai organisé le dépôt pour GitHub, je le publierai.