Es stellte sich heraus, dass ich auch KuroEditor bauen musste (Heul) Vol. 1

Warte, es gibt keinen Editor?!

Etwa auf halbem Weg der Entwicklung von KuroCMS erinnerte sich Kuroto plötzlich an die immense Mühe und Zeit, die er für die Einrichtung eines ordentlichen Editors in Strapi aufgewendet hatte, und erstarrte. Wären meine Haare weiß geworden, wäre ich vielleicht ein Pandakaninchen geworden.

Obwohl diese Editoren für Strapi nicht funktionierten, begann ich zu recherchieren, in der Hoffnung, einen Editor zu finden, der meine Anforderungen anderswo erfüllte... aber ich konnte keinen finden. Unmöglich, bitte sag mir, dass das nicht wahr ist, Chappy! (ChatGPT)

Suche ausschließlich unter der MIT-Lizenz

Da ich plante, ihn zusammen mit KuroCMS zu verpacken und zu verteilen, war ein unter der MIT-Lizenz stehender Editor offensichtlich die bequemste Option.

Nach meinen Recherchen scheint der aktuelle Trend bei Web-Editoren vollständig von Headless-Optionen beherrscht zu werden – bei denen man sich nur die Logik leiht und die Benutzeroberfläche selbst baut. Genau wie bei Headless-CMS.

Die 5 am besten bewerteten Editoren der Welt

【TipTap】

1. Berichten zufolge die unbestrittene Nummer eins. Extrem flexibel, unterstützt React/Vue und gibt HTML / JSON aus.
2. Ein Headless-Editor. Sie können Tastendesigns und Symbolleisten-Layouts vollständig an die Benutzeroberfläche Ihrer App anpassen. Er basiert auf der leistungsstarken ProseMirror-Engine.
3. Nutzerbasis: Über 37.000 GitHub-Sterne und über 8 Millionen wöchentliche Downloads. Praktisch der weltweite Standard.
4. So integrieren Sie es: Installieren Sie es über `npm install @tiptap/react` und steuern Sie es mit dem `useEditor`-Hook.

【Editor.js】

1. Begeisterte Fangemeinde, angeblich intuitiv mit einem Notion-ähnlichen Gefühl, Plugin-basiert, gibt JSON (strukturierte Daten) aus.
2. Eigenschaften: Behandelt alles als Block (Absätze, Bilder, Überschriften). Ähnliches Bediengefühl wie Notion.
3. Gibt sauberes JSON statt HTML aus, was es ideal für die Anzeige derselben Daten auf Webseiten, mobilen Apps, Smartwatches usw. macht.
4. So integrieren Sie es: Laden Sie das Core-Paket und einzelne Tools (Bild, Header usw.) separat und initialisieren Sie es dann mit `new EditorJS()`.

【Lexical】

1. Schnell wachsend, schnell, leicht, robust, von Meta entwickelt, designorientiert, gibt HTML / JSON aus.
2. Spezialisiert auf Leistung und Barrierefreiheit. Extrem leicht, wodurch selbst Großanwendungen schnell bleiben.
3. Nutzerbasis: Rasant steigend. Funktioniert gut mit KI-generierten Inhalten und wird häufig für KI-Editoren verwendet.
4. Eigenschaften: Bietet erweitertes Zustandsmanagement und ein baumbasiertes Datenmodell. Vollständig WCAG-konform (Barrierefreiheitsstandards).
5. So integrieren Sie es: Als React-Plugin integrieren. Definieren Sie benannte „Knoten“ (nodes), um den Editor zu erstellen.

【Slate】 (Das leistungsstärkste Framework exklusiv für React)

1. Entwickelt für Entwickler, ultimative Anpassung, nur für React, gibt JSON (beliebig) aus.
2. Eigenschaften: Weniger ein Editor als vielmehr eine Bibliothek zum Erstellen von Editoren. Sie können Ihr eigenes Dokumentenmodell vollständig definieren.
3. Nutzerbasis: Starke Unterstützung in der React-Community (über 31.000 GitHub-Sterne).
4. Eigenschaften: Stark bei der Handhabung von Dokumenten mit komplexen verschachtelten Strukturen (z. B. Listen in Tabellen, Bilder in Listen).
5. So integrieren Sie es: Aufbauend auf einem komponentenorientierten Ansatz. Schreiben Sie benutzerdefinierte Funktionen wie `renderElement`, um das Rendering zu steuern.

【Milkdown】 (WYSIWYG spezialisiert auf Markdown)

1. Stark in spezifischen Anwendungsfällen | Verbindet Markdown mit visueller Bedienung | Niedriger bis mittlerer Schwierigkeitsgrad | Gibt Markdown / HTML aus
2. Eigenschaften: Bietet eine Typora-ähnliche Erfahrung, bei der Markdown in Echtzeit während des Schreibens formatiert wird.
3. Nutzerbasis: Spezialisiert auf Entwickler und technische Dokumentation.
4. Eigenschaften: Leistungsstarke Markdown-Erweiterungen über Plugins. Unterstützt mathematische Symbole (LaTeX) und Diagramme (Mermaid).
5. So integrieren Sie es: Mit TypeScript erstellt; initialisieren Sie es, indem Sie die erforderlichen Plugins in einem Array übergeben.

Und was ist mit diesen fünf?

Ich habe versucht, TipTap und Lexical als Editoren für Strapi zu verwenden, aber das hat überhaupt nicht geklappt... Lexical kam mit Bildern nicht richtig klar, und TipTap hatte auch Probleme. Keiner von ihnen kam dem WYSIWYG (was bedeutet, dass man im Editor genau so bearbeiten kann, wie es im fertigen Zustand aussieht) nahe, das Kuroto haben wollte. Editor.js war im Grunde das Gleiche; ein reiner JSON-Editor kann kein echtes WYSIWYG bieten. Sie mögen in Ordnung sein, wenn man nur Text und Code fortlaufend eingibt. Was Milkdown betrifft, werden Bilder nicht einmal erwähnt – da kann man auch gleich LaTeX verwenden. Und ehrlich gesagt, Kuroto mag React überhaupt nicht. Entschuldigung an Meta (Schweiß). Wenn ein Framework nötig ist, verwende ich höchstens Vue, aber mir geht es nur um Astro! Da fällt mir ein, dass es früher einen Manga namens Astro Kyudan gab.

Letztendlich erinnerte ich mich daran, dass Quill + better-table, das ich in Strapi verwendet hatte, die beste Option war. Die Tabellen-Implementierung konnte ich jedoch einfach nicht akzeptieren lol. Da sagte der kleine Teufel in meinem Kopf: „Wenn du dich so sehr beschwerst, bau es selbst!“ Tatsächlich hast du recht. Meine Entschuldigung.

Und so begann die Entwicklung des KuroEditors

Ich brauchte keinen Hochleistungs-Editor. Ich wollte nur WYSIWYG und ein Tabellen-Tool, das stressfrei zu bedienen ist, ähnlich wie Dropbox Paper! Angetrieben von diesem inneren Schrei beschloss ich, es selbst zu bauen. Ich werde die Details des von Kuroto erstellten Editors im nächsten Artikel teilen. Er ist fast fertig, und sobald ich die Tests während des Schreibens dieser Artikel abgeschlossen und das Repository für GitHub organisiert habe, werde ich ihn veröffentlichen.