Extreme Anpassung von Strapi 5: Integration von Quill und Multi-Tenant-Architektur

Im September 2025 brachte die Veröffentlichung von „Strapi 5“ wichtige Updates für Entwickler. Mit einem klaren Bruch mit den Datenstrukturen von Strapi 4 führte es bahnbrechende Änderungen ein, überarbeitete mehrsprachige APIs und steigerte die Leistung. Obwohl es zu einem einfacheren und leistungsstärkeren Tool wurde, ließen einige Standardkonfigurationen Raum für Verbesserungen.

Insbesondere der standardmäßige „Blocks“-Editor (basierend auf Lexical) ist zwar modern, es fehlen ihm jedoch die erweiterten Tools zur Tabellenbearbeitung und Textgestaltung, die häufig für anspruchsvolle Layouts benötigt werden. Er konnte standardmäßig nicht einmal eine einfache Tabelle erstellen. Während Tabellenrahmen im westlichen Design seltener sind, sind sie in Japan unerlässlich, um strukturierte, leicht lesbare Seiten zu erstellen.

Darüber hinaus fehlt Strapi 5 ein natives Multi-Tenancy (Mandantenfähigkeit). Man kann zwar separate Container für jede Organisation betreiben, aber der Betrieb einer dedizierten PostgreSQL-Datenbank für jeden Mandanten ist kostspielig. Um eine kosteneffiziente Mandantenfähigkeit zu erreichen, habe ich das Backend angepasst. Hier ist, wie ich die Strapi 5-Umgebung für den Blog „kuro.boo“ modifiziert habe, um ein hervorragendes Bearbeitungserlebnis und eine hohe Verwaltungseffizienz zu erreichen.

1. Behebung von Eigenheiten der japanischen Eingabe (IME)

Strapi basiert auf React, was bestimmte UI-Verhaltensweisen mit sich bringt. Der Haupteditor in Strapi 5 hatte geringfügige Probleme bei der Verarbeitung von japanischen IME-Ereignissen, was während des Tippens zu Cursorsprüngen führte. Ich habe drei verschiedene IMEs auf macOS ausprobiert – das Standard-Apple-IME, Google Japanese Input und Kawasemi –, aber die Cursorprobleme blieben bestehen, da der Editor unnötige Tastaturereignisse abfing. Zuerst musste ich Artikel in externen Editoren wie Zed schreiben und sie kopieren. Das war zu mühsam.

2. Umgang mit mehreren Bildern

Artikel benötigen mehr als nur Text und Coverbilder. Ich habe zuerst das folgende Plugin ausprobiert:

TipTap

TipTap ist beliebt und unterstützt mehrere Bilder, aber seine Implementierung erforderte das Hinzufügen separater Eingabeblöcke für jedes einzelne Bild und jeden Textabsatz. Dies fühlte sich veraltet an und war weit entfernt von einer echten WYSIWYG-Erfahrung, sodass ich die reibungslosen Layout-Tools von Dropbox Paper vermisste (das ich häufig verwende).

3. Übergang zu Quill

Da Lexical und TipTap meinen Anforderungen nicht entsprachen, schaute ich mir Quill an. Mit seiner V2-Veröffentlichung bietet Quill eine hervorragende Flexibilität. Seine WYSIWYG-Funktionen sahen vielversprechend aus, aber es fehlte immer noch die native Unterstützung für erweiterte Tabellen. Um dies zu beheben, habe ich „quill-better-table“ integriert (nach einem Tag Debugging). Dieses Plugin ermöglicht das Hinzufügen/Löschen von Zeilen und Spalten per Rechtsklick, das Zusammenführen von Zellen und benutzerdefiniertes Zellendesign direkt im Administrationsbereich von Strapi. Wichtig ist, dass diese Tabellen als Standard-HTML gespeichert werden, was das Rendern im Astro-Frontend erleichtert.

Dies löste sowohl die Probleme mit der Tabellenbearbeitung als auch die IME-Eingabeprobleme und bescherte uns ein hochfunktionales WYSIWYG-Editor-Panel in Strapi:

4. Hinzufügen von Drag-and-Drop-Bilduploads

Um das Schreiben flüssiger zu gestalten, habe ich eine Drag-and-Drop-Funktion hinzugefügt: Das Ziehen eines Bildes oder das Einfügen aus der Zwischenablage löst automatisch die Upload-API von Strapi aus, registriert es in der Medienbibliothek und fügt es in den Editor ein. (Hinweis: Da Drag-and-Drop keine detaillierten Fehlermeldungen für zu große Dateien anzeigt, müssen wir die Dateigrößenbeschränkungen weiterhin im Auge behalten).

5. Schemabasiertes Multi-Tenancy

Um mehrere Websites in einer einzigen Strapi-Instanz zu verwalten, ohne separate Datenbankcontainer hochzufahren, habe ich das Wechseln von Datenbankschemata (DATABASE_SCHEMA) innerhalb derselben Datenbankinstanz implementiert. Dies hält die Datenbankkosten niedrig und sorgt gleichzeitig für separate, sichere Datenbankumgebungen für jeden Mandanten.

6. Ein lokal fokussierter Workflow für statische Website-Generierung (SSG)

Während der Betrieb eines CMS-Servers rund um die Uhr ideal für kollaborative Teams ist, verursacht er unnötige Kosten und Sicherheitsrisiken für persönliche Blogs oder Websites mit seltenen Updates. Daher habe ich die Bereitstellungsarchitektur geändert:

1. Starten Sie die lokale Strapi-Instanz nur zum Schreiben oder Bearbeiten.
2. Führen Sie einen Entwicklungs-Build aus, der Strapi-Inhalte in statische Astro-Seiten kompiliert, Bilder in den Build-Ordner kopiert und Bildlinks aktualisiert.
3. Stoppen Sie die lokale Strapi-Instanz und stellen Sie die vollständig statische Website auf Cloudflare Pages bereit.

Dieses Setup bedeutet, dass unsere öffentliche Website vollständig im Edge-Netzwerk von Cloudflare gehostet wird. Sie lädt extrem schnell, kostet nichts und eliminiert die Sicherheitsrisiken öffentlich zugänglicher Datenbanken. Auf kuro.boo lasse ich die lokale Strapi-Instanz aus Bequemlichkeit auf meinem lokalen Rechner laufen, da dadurch keine Hosting-Gebühren anfallen.

Vergleich der Standard- und benutzerdefinierten Einstellungen:

Fazit

Ich habe auch einen kleinen Fehler behoben, bei dem jede kleine Änderung das Veröffentlichungsdatum des Artikels aktualisierte und ältere Beiträge an den Anfang des Feeds verschob. Ich habe ein dediziertes `publishedAt`-Feld hinzugefügt und sortiere nun danach. Obwohl die direkte Änderung des Strapi 5-Quellcodes zukünftige Upgrades erschweren könnte, macht dieses Maß an Anpassbarkeit Headless-CMS-Plattformen so mächtig. Es hat mir ermöglicht, eine genau auf meine Bedürfnisse zugeschnittene Bearbeitungsumgebung aufzubauen.

Quellen:

・Strapi 5 Dokumentation

・Quill - Rich Text Editor

・quill-table-better (GitHub)