Froala Inline Text Editor

Ein produktionsbereites kommerzielles Plugin, das den Standard-GrapesJS-Rich-Text-Editor durch das vollständige Froala-WYSIWYG-Erlebnis ersetzt – Inline-Bearbeitung, fortschrittliche Formatierung, Bild- und Link-Tools, Personalisierungstoken und nahtlose Integration von GrapesJS Studio. Striktes TypeScript durchgehend, Zwei-Version-Froala-Unterstützung (4.x und 5.x) und erprobte Lebenszyklus-Bereinigung, die schnelle Ein- und Deaktivierungszyklen übersteht, ohne DOM zu vergrößern.

Für wen ist das

Teams liefern Landingpages, E-Mail-Vorlagen, SaaS-Onboarding-Flows und visuelle Editoren aus, die aus dem Standard-GrapesJS RTE herausgewachsen sind und nicht eine Woche lang Froala selbst verkabeln wollen. Wenn du Froala bereits lizenziert hast (oder es vorhast) und GrapesJS oder GrapesJS Studio in der Produktion nutzt, entfernt dieses Plugin etwa tausend Zeilen Integrationskleber – und die acht oder neun subtilen Fehler, die du sonst auf die harte Tour entdecken würdest.

Was du bekommst

Inline- und Blockbearbeitung, konfiguriert pro Tag.Block-Level-Bearbeitung für Absätze und Divs mit der vollständigen Froala-Werkzeugleiste. Leichter Inline-Modus für<span>,<a>,,<button> und Überschriftenelemente mit einer schlanken Werkzeugleiste. Wähle aus, welche Tags Inline-Verhalten über eine einzigeinlineKonfigurationsoption erhalten – kein Patching.

Native GrapesJS Studio-Unterstützung.Offiziell kompatibel mit@grapesjs/studio-sdk. Froalas Stylesheet wird über dieinjectCanvasStylesOption automatisch in das Canvas-iframe eingeschleust, sodass der Editor innerhalb von Studio ohne manuelles Stylesheet-Kabel korrekt rendert. Wird mit einer laufbaren Studio-Demo ausgeliefert.

Unterstützung für Dual-Froala-Versionen — 4.x und 5.x.Laufzeit-Versionserkennung über einen einzigen Kompatibilitätsadapter. Upgrade oder downgrade Froala, ohne den Plugin-Code zu bearbeiten. Peer Range ist auf festgelegt>=4.0.14 <6, sodass du deine Editor-Version nach deinem eigenen Zeitplan steuerst.

Personalisierungstoken direkt aus der Box.Ein fertigerpersonalization_ddFroala-Befehl fügt ausgewählte Merge-Token in das Dropdown-Menü ein wie{{Name}},{{Email}}, oder ein beliebiges Token-Set, das du konfigurierst. Greifen Sie direkt auf E-Mail-Template-Builder und Marketing-Tools – kein benutzerdefinierter Befehlscode erforderlich.

Gedächtnissicherer Lebenszyklus.Jede langlebige Ressource wird verfolgt und beim Deaktivieren veröffentlicht: entplatzteMutationObservers für Inhalte und Werkzeugleiste (50 ms), der Canvas-iframe-Listenermousedown, ausstehendesetTimeouts und – entscheidend – alle Waisenknoten.fr-toolbar, die Froala v5 gelegentlich während Zerstörungsrennen feststeckt. Keine Lecks über zwanzig schnelle Ein-/Deaktivierungszyklen in der e2e-Suite bestätigt.

Intelligente Toolbar-Positionierung.Anzeigebalken-Positionsupdates reagieren auf GrapesJS-EreignisserteToolbarPosUpdate, Ansichtsgrößenänderungen und Scrollen. Grenzen, Radius und Abstand sind vollständig konfigurierbar. Caret-Wiederherstellung verwendet eine sichere Rückfallkette (caretRangeFromPoint→caretPositionFromPoint), sodass die Cursorplatzierung die WebKit/Chromium-Randfälle überlebt, die naive Integrationen brechen.

TypeScript erstklassig.Das gesamte Plugin ist im Strict-Mode-TypeScript geschrieben. Type Declarations (.d.ts) und Declaration Maps werden im Bundle ausgeliefert – dein Editor springt direkt von einemfroala(editor, options)Aufruf in ein vollständig typisiertes Optionsobjekt. Null Impliziteany.

Multi-Format-Distribution.

• ESM (.mjs) für moderne Bundler
• CommonJS (.cjs) für Node- und Altwerkzeuge
• UMD (.min.js) für<script>Tag-Installationen
• Quellkarten für alle drei

Das minifizierte Bundle ist ungefähr 50 KB groß (Froala selbst bleibt eine Peer-Abhängigkeit, die man separat mitbringt).

Technische Daten

Was gibt's Neues

• 1.2.0 — Integration von GrapesJS Studio.Injiziert Froala-Styles automatisch in das iframe der Studio-Leinwand. Studio-Demo- und Playwright-e2e-Berichterstattung wurden parallel dazu geliefert.
• 1.1.1 — Korrektur für das Lecken der Symbolleiste.Defensive Sweep eliminiert Waisenknoten.fr-toolbarwährend Froala v5 und zerstört Rassen unter schnellen Aktivieren/Deaktivieren-Zyklen.
• 1.1.0 — TypeScript-Migration.Die vollständige Quelle wechselte zu striktem TypeScript; Erklärungen, die von der Quelle ausgegeben werden; Gewerbliche Lizenz angenommen.
• 1.0.0 — Marktplatz-Veröffentlichung.Modulare Architektur (acht fokussierte Module statt einer 380-Zeilen-Datei), duale Froala-Versionsunterstützung, vollständige Testabdeckung, CI/CD-Pipeline.