1
TypeScript-Unterstützung
GrapesJS v1.x wird mit vollständigen TypeScript-Typdefinitionen ausgeliefert – unerlässlich für Angular-Projekte.
22k+
GitHub Sterne
MIT
Open Source
v1.x
TypeScript bereit
45 Minuten
Durchschnittliches Winkel-Setup
Eckige Builder-Muster
Laden Sie einen produktionsbereiten Drag-and-Drop-Editor in Ihrer Angular-App ein
GrapesJS ist der führende Open-Source-Visual-Builder, der mit jedem JavaScript-Framework kompatibel ist. Angular-Entwickler verwenden das Service-Wrapper-Pattern, um den Editor-Lebenszyklus zu verwalten, ihn in Komponenten einzufügen und Zone.js Konflikte zu vermeiden.
Was Angular-Entwickler in einem Drag-and-Drop-Builder brauchen
2
Lebenszykluskompatibilität
Initialisieren Sie in ngAfterViewInit, zerstören Sie in ngOnDestroy. GrapesJS fügt sich natürlich in Angular-Lebenszyklus-Hooks ein.
3
Zone.js Integration
Verwenden Sie NgZone.runOutsideAngular(), um GrapesJS zu initialisieren und unnötige Wechselerkennungszyklen zu vermeiden.
4
AOT-Kompilation
GrapesJS ist eine Vanilla-JS-Bibliothek ohne Angular-spezifische Dekorateure – sie kompiliert sauber im Angular AOT-Modus.
GrapesJS — das beste Angular-kompatible Builder-Framework
Im Gegensatz zu React-nativen Buildern (Puck, Craft.js) ist GrapesJS eine Standard-JavaScript-Bibliothek, die sich mit jedem Framework integriert. Angular-Entwickler verwenden das Angular Service-Muster, um den Editor-Lebenszyklus zu verwalten, ihn in Komponenten einzufügen und beim Zerstören zu bereinigen.
GrapesJS wurde in Unternehmens-Angular-Anwendungen für CMS, Formularentwickler, Berichtsdesigner und White-Label-SaaS-Produkte verwendet. Sehen Sie sich das Ganze an GrapesJS Angular-Integrationsleitfaden für das vollständige Service-Wrapper-Muster und TypeScript-Beispiele.
Integrationsleitfaden — 4 Schritte
1
Installiere GrapesJS
NPM-InstallationFühre npm und installiere Grapesjs in deinem Angular-Projekt. Importiere das CSS im angular.json Styles-Array.
2
Erstelle einen GrapesJS-Dienst
@InjectableVerwenden Sie einen @Injectable Service, um die Editor-Instanz zu verwalten und sie außerhalb der Angular-Änderungserkennung über NgZone zu halten.
3
Initialisieren in ngAfterViewInit
AfterViewInitVerwende @ViewChild, um eine Referenz auf das Container-Element zu erhalten. Initialisieren Sie den Editor, nachdem die Ansicht vollständig gerendert ist.
4
Zerstöre in ngOnDestroy
OnDestroyRuf editor.destroy() in ngOnDestroy auf, um den Editor zu säubern und Speicherlecks beim Entfernen der Komponente zu verhindern.
Angular-kompatible Plugins
TypeScriptKostenlos
GrapesJS TypeScript-Typen
Vollständige TypeScript-Definitionen für Angular-Integration – kein separates @types-Paket erforderlich.
BlöckeKostenlos
Block Library Pro
Vorgefertigte Drag-and-Drop-Blöcke für Unternehmens-Angular-Apps.
LagerungKostenlos
Storage Manager Pro
Persistiere Editorinhalte in REST-APIs, Datenbanken oder lokalen Speicher.
UIKostenlos
Benutzerdefiniertes Befehle-Plugin
Erweitern Sie den Editor mit von Angular verwalteten Befehlen und Werkzeugleistenaktionen.
Anwendungsfälle für Unternehmen
🏢
Unternehmens-CMS
Integrieren Sie GrapesJS als visuelle Bearbeitungsebene eines Content-Management-Systems mit von Angular verwalteter Authentifizierung und Routing.
📋
Formularbauer
Drag-and-Drop-Formulardesigner integriert in ein Angular-Admin-Panel mit reaktiver Formularvalidierung und Einreichungslogik.
📊
Berichtsdesigner
Visuelles Layout-Tool für individuelle Berichte – gebaut mit GrapesJS-Blöcken, die Diagramme, Tabellen und gebrandete Textabschnitte darstellen.
🚀
E-Mail-Vorlagen-Builder
HTML-E-Mail-Editor mit responsiver Vorschau, angetrieben von GrapesJS Preset-Newsletter innerhalb einer Angular-App.
🏷️
Landingpage Builder
No-Code-Marketing-Seitenbauer für Content-Teams, eingebettet in eine Angular-SaaS-Plattform mit rollenbasierten Berechtigungen.
✉️
White-Label-SaaS
Multi-Tenant-Seiteneditor mit kundenspezifischem Theming, Asset-Namensabstand und Veröffentlichungsworkflows in Angular Universal.
Bekannte Probleme und Workarounds
Change Detection – Ereignisse in NgZone umwickeln
GrapesJS feuert alle Events außerhalb von Angulars Zone ab. Wrap Editor-Event-Callbacks innerhalb von NgZone.run(() => { ... }), um die Änderungserkennung für jeden Angular-Zustand, den du im Inneren aktualisierst, korrekt auszulösen.
SSR — Guard-Initialisierung mit isPlatformBrowser
GrapesJS benötigt einen Browser-DOM. Bei Verwendung von Angular Universal wird die Initialisierung mit isPlatformBrowser(platformId) geschützt, um serverseitige Rendering-Fehler zu vermeiden.
DOM-Timing – benutze ngAfterViewInit, nicht ngOnInit
Initialisiere immer GrapesJS in ngAfterViewInit. Bei ngOnInit ist die @ViewChild Container-Referenz noch nicht verfügbar und wird undefiniert sein.
Häufig gestellte Fragen
Verwandte Leitfäden
Fang an, deinen Angular-Visual-Editor zu bauen
Durchsuchen Sie GrapesJS-Plugins, die mit Angular auf GJS.Market kompatibel sind. Liefern Sie schneller mit produktionsreifen Komponenten.
Fang mit GrapesJS für Angular → an