Das beste Upgrade für einen Editor ist das, das die Angst vor der Arbeit mit Inhalten beseitigt.
Wir haben einen Tiptap React-Editor zu unserem E-Commerce PageBuilder hinzugefügt, weil rohe HTML-Blöcke zu teuer geworden waren, um sie zu bearbeiten. Sie funktionierten, aber nur für Menschen, die sich mit Markup auskannten. Ein Händler sollte in der Lage sein, eine Überschrift, ein Bild, einen Button, Spalten, Tabs oder ein Instagram-Embed hinzuzufügen, ohne das Layout der Produktseite zu brechen oder unsicheres HTML zu versenden.
Die Arbeit landete im Branch `codex/htmlblock-wysiwyg-editor` im E-Commerce-Theme. Der erste Implementierungs-Commit, `08692e2e`, fügte den HTML-Block WYSIWYG-Editor hinzu. Spätere Commits verbesserten die Interaktionen, verschoben Labels in das Übersetzungssystem, verstärkten die Medienverarbeitung und deduplizierten Bilder in der Mediathek nach ID.
Tiptap war eine gute Wahl, weil es uns nicht in eine geschlossene CMS-Form zwang. Wir behielten den bestehenden PageBuilder HTML-Vertrag und verwendeten Tiptap als Bearbeitungs-Engine.
Was wir gebaut haben
Das sichtbare Feature ist einfach: PageBuilder HTML-Blöcke haben jetzt einen echten Editor anstelle eines rohen HTML-Textfelds.
Die Implementierung ist nützlicher, als dieser Satz klingt. Der Editor unterstützt:
Dieser letzte Punkt war wichtig. Dies war kein Greenfield-Editor. Das E-Commerce-Frontend hatte bereits Inhalte im Bootstrap-Stil, Legacy-CMS-Schnipsel, PageBuilder-Zonen, PrestaShop-Medienpfade und SEO-Regeln. Wir benötigten eine WYSIWYG-Schicht, die Inhalte bearbeiten konnte, ohne das bestehende HTML-Modell der Seite zu verflachen.
Warum Tiptap einfach erschien
Die React-Integration von Tiptap ist klein: `useEditor`, `EditorContent` und ein Erweiterungsarray. StarterKit bietet die grundlegenden Bearbeitungsprimitive, dann fügen Sie die Teile hinzu, die Ihr Produkt benötigt.
In unserem Fall blieb das Abhängigkeitsset verständlich:
Das reichte aus, um die Editor-Oberfläche zu erstellen und dann unsere eigenen E-Commerce-Blöcke darauf zu schichten. Wir verwendeten `StarterKit.configure()` für das Standardverhalten des Editors, deaktivierten die standardmäßige Linkbehandlung, wo wir unsere eigenen Regeln benötigten, und konfigurierten Link und Highlight explizit.
Der einfache Teil war nicht, dass Tiptap jedes E-Commerce-Problem löste. Das tat es nicht. Der einfache Teil war das Erweiterungsmodell. Wir konnten unsere eigenen Inhaltsknoten direkt beschreiben: Button, Bild, Legacy-Bild, Instagram-Embed, Spalten, Tabs, Abstand, Tabelle, Schriftgröße, Listenstil und Textausrichtung.
Das lässt sich sauber auf einen PageBuilder abbilden. Ein Button ist nicht nur stilisierter Text. Ein Bild ist nicht nur ein `img`-Tag. Eine Tab-Komponente hat Labels, Panels, IDs, aktiven Zustand und zugängliche Rollen. Tiptap erlaubte es uns, diese Dinge als Editor-Inhalt zu modellieren, anstatt zu versuchen, sie nachträglich aus einem Textfeld abzuleiten.
Der HTML-Roundtrip war der wichtige Teil
Viele WYSIWYG-Migrationen scheitern, weil der Editor ein Format will und die Seite ein anderes rendert.
Das wollten wir nicht. Das Frontend rendert bereits HTML-Blöcke über Produktseiten, Inhaltsseiten, Abschnitte der Startseite, Slots in der Nähe des Checkouts und andere PageBuilder-Zonen. Der Editor musste bestehendes HTML laden, es einem Administrator ermöglichen, es zu ändern, und HTML speichern, das der öffentliche Storefront sicher rendern konnte.
Tiptap gab uns die Konvertierungswerkzeuge dafür. Für Tab-Panels verwenden wir `generateJSON()`, um bestehendes HTML in Editor-Inhalt umzuwandeln, und `generateHTML()`, um Panel-Inhalt zurück in HTML zu verwandeln. Das hält die Bearbeitungsoberfläche strukturiert und bewahrt die öffentliche HTML-Ausgabe der Seite.
Das ist auch für SEO wichtig. Ein CTA bleibt ein Anker. Eine Überschrift bleibt eine Überschrift. Ein Bild bleibt eine semantische Figur mit Alt-Text und Bildunterschrift. Tabs behalten durchsuchbaren Panel-Inhalt. Wir haben E-Commerce-Texte nicht in einem nur für den Client bestimmten Widget versteckt, das Suchmaschinen oder unterstützende Technologien erraten müssen.
Der Editor ist einfach für Händler, streng für Code
Die Admin-Oberfläche verbirgt den Großteil der Komplexität.
Editoren sehen Symbolleisten-Schaltflächen, Dialoge, Layout-Karten, Bildfelder und einen Medienauswahlfeld. Sie können Text auswählen und ein schwebendes BubbleMenu für die Formatierung verwenden. Sie können ein Zwei-Spalten- oder Drei-Spalten-Layout wählen, ohne sich an Bootstrap-Klassen erinnern zu müssen. Sie können Tabs hinzufügen und das erste Panel vor dem Speichern in der Vorschau anzeigen.
Der Code bleibt darunter streng:
Diese Trennung ist der Grund, warum ich diese Implementierung mag. Die UI fühlt sich nachsichtig an, aber die gespeicherte Ausgabe ist kontrolliert.
Sicherheit war nicht optional
Rich-Text-Editoren sind gefährlich, wenn der Speicherpfad dem vertraut, was der Browser zurücksendet.
Wir haben einen speziellen Rich-Text-Sanitizer um die öffentliche Darstellung hinzugefügt. Er verwendet DOMPurify mit einer expliziten Erlaubenliste von Tags und Attributen. Er entfernt skriptbare und ausführbare Markups, bevor der Inhalt die React-Roh-HTML-Senken erreicht. Er normalisiert auch die Instagram-Embed-Daten und entfernt blockierte URL-Protokolle aus URL-wertigen Attributen.
Die Render-Tests decken die Fälle ab, die für einen E-Commerce-PageBuilder wichtig sind:
Das ist der Unterschied zwischen "wir haben einen WYSIWYG-Editor hinzugefügt" und "wir können es den Leuten erlauben, ihn in der Produktion zu verwenden."
Die Branch-Historie erzählt die wahre Geschichte
Der erste Commit war groß: 18 Dateien geändert, 6.282 Einfügungen, 187 Löschungen. Er fügte Tiptap-Abhängigkeiten zu beiden Storefront-Apps hinzu, eine 3.000-Zeilen-Editor-Komponente, mehr als 1.100 Zeilen Editor-SCSS, Render-Tests, Admin-Steuerelemente, Layout-Verarbeitung und den Sanitizer-Pfad.
Dann kam das Feinschliff. `d092141d` verbesserte den HTML-Block-Editor und die Navigationsinteraktionen. `320591ec` fügte Übersetzungsabdeckung in Englisch, Schwedisch und Französisch hinzu, entfernte einen Medienauswahl-Hook, verstärkte das Verhalten des Editors und machte Tabs flexibler. `2c7928b9` deduplizierte Bilder in der Mediathek nach ID.
Das ist das wahre Muster bei der Arbeit mit Editoren. Die erste Version beweist, dass der Editor existieren kann. Die nachfolgenden Commits machen ihn benutzbar.
Wo Tiptap am meisten geholfen hat
Tiptap half an drei Stellen.
Erstens machte es den Kern des Editors langweilig. Wir mussten keine Selektionen, Befehle, Rückgängig/Wiederholen, Tastaturverhalten oder schwebende Menüs erfinden. Die React-Integration und StarterKit gaben uns eine stabile Basis.
Zweitens ließ es uns E-Commerce-spezifische Blöcke modellieren, ohne sie in brüchiger Zeichenfolgenmanipulation zu verstecken. Benutzerdefinierte Knoten und Befehle gaben Buttons, Bildern, Spalten, Tabs und Embeds eine echte Form.
Drittens ließ es uns unseren Rendering-Vertrag beibehalten. Wir konnten HTML speichern und rendern, weil die öffentliche Storefront bereits von HTML-Blöcken abhängt, während wir intern weiterhin strukturierte Editor-Inhalte verwenden, wo es sinnvoll ist.
Diese Kombination ist selten. Viele Editoren sind einfach, bis Sie benutzerdefinierte Ausgaben benötigen. Viele benutzerdefinierte Editoren sind flexibel, bis Sie ein normales Schreiberlebnis benötigen. Tiptap sitzt im nützlichen Mittelfeld.
Der Kompromiss
Tiptap entfernt keine Produktentscheidungen.
Sie müssen immer noch entscheiden, welche Inhaltstypen erlaubt sind, welches HTML überlebt, wie Bilder ausgewählt werden, wie Links validiert werden, wie eingefügter Inhalt sich verhält, wie Übersetzungen funktionieren, wie der öffentliche Renderpfad Inhalte sanitisiert und wie viel Freiheit Händler haben sollten.
Für einen Blog-Editor kann Tiptap schnell sein. Für einen E-Commerce PageBuilder lebt der Großteil der Arbeit rund um Tiptap: Legacy-Kompatibilität, Render-Tests, Medien-Workflows, Barrierefreiheit, SEO, Übersetzungen und Leitplanken.
Das ist in Ordnung. Ein guter headless Editor sollte Ihnen Primitive geben, nicht so tun, als ob Ihre Geschäftsregeln nicht existieren.
Mein Fazit
Ich würde Tiptap für diese Art von Arbeit wieder verwenden.
Die Implementierung gab uns einen praktischen Tiptap React-Editor, ohne das bestehende PageBuilder-System wegzuwerfen. Händler erhalten eine sicherere Bearbeitungsoberfläche. Entwickler behalten vorhersehbares HTML. SEO-kritische Inhalte bleiben durchsuchbar. Die Storefront hängt nicht von einem fragilen client-only Rendering-Trick ab.
Das ist der Standard, den ich für E-Commerce-Admin-Tools möchte: einfach an der Oberfläche, streng in der Ausgabe und langweilig genug, um nach dem ersten Start Vertrauen zu haben.