Wie man einen Drag-and-Drop-Seiten-Builder in Angular mit GrapesJS (Schritt-für-Schritt-Anleitung + Code) erstellt

Einen Drag-and-Drop-Seiten-Builder in Angular zu erstellen, ist dank GrapesJS einfacher, als man vielleicht denkt. GrapesJS ist ein Open-Source-Web-Builder-Framework, das es ermöglicht, HTML-Seiten mit einem visuellen Drag-and-Drop-Editor zu erstellen. In diesem Tutorial integrieren wir GrapesJS in eine Angular-Anwendung, um mit minimalem Code einen Page Builder zu erstellen. Du lernst, wie man GrapesJS in Angular einrichtet, das offizielle GrapesJS Basic Blocks-Plugin für fertige Inhaltsblöcke verwendet, das entworfene HTML/CSS exportiert und es sogar im Backend speichert. Wir werden Angular v20 verwenden (die neueste stabile Version ab Oktober 2025) und die neueste GrapesJS-Bibliothek, um sicherzustellen, dass du auf dem neuesten Stand bist.

Am Ende dieser Schritt-für-Schritt-Anleitung hast du einen funktionierenden Seiten-Builder in Angular, in dem Nutzer grundlegende Blöcke (Text, Bilder, Spalten usw.) auf eine Leinwand ziehen, sie mit den integrierten Editoren von GrapesJS stylen und die Ergebnisse speichern können. Fangen wir an!

Voraussetzungen

Stellen Sie sicher, dass Sie Folgendes installiert und eingerichtet haben, bevor Sie fortfahren:

• Node.js und npm – Installieren Sie die neueste LTS-Version von Node.js, die mit NPM geliefert wird.
• Angular CLI – Installieren Sie global mit npm Installation -g @angular/cli. Dieses Tutorial verwendet Angular CLI 20.
• Grundlegendes Angular-Wissen – Verständnis von Komponenten, Modulen und Services in Angular.
• Ein Code-Editor – z. B. VS Code, WebStorm usw., um Ihre Projektdateien zu bearbeiten.
• Internetverbindung – GrapesJS wird über npm installiert.

Schritt 1: Aufbau des Angular-Projekts

Zuerst erstelle ein neues Angular-Projekt mit der Angular-CLI. Wir nennen das Projekt grapesjs-pagebuilder (du kannst jeden Namen wählen):

ng neuer Grapesjs-Seitenbauer

Folge den CLI-Anweisungen (du kannst für diese einfache Demo das Routing überspringen und CSS als Stylesheet-Format verwenden). Sobald das Projekt generiert ist, navigieren Sie in das Projektverzeichnis und starten Sie den Entwicklungsserver:

cd grapesjs-pagebuilder
ng serve -o

Dies öffnet die Standard-Eckar-Willkommensseite unter http://localhost:4200/. Als Nächstes richten wir die Struktur für unseren Seiten-Builder ein. Generiere eine neue Angular-Komponente, die den GrapesJS-Editor hostet. Wir nennen es PageBuilderComponent:

ng generiere Komponenten-Seiten-Builder

Dadurch werden page-builder.component.ts, die HTML/CSS-Dateien erstellt und das App-Modul aktualisiert. Für dieses Tutorial möchten wir, dass unser Page Builder-Teil die gesamte App umfasst. Öffnen Sie src/app/app.component.html und ersetzen Sie den Inhalt durch den <app-Page-Builder></app-Page-Builder>-Selector (und entfernen Sie den Standard-Template-Text). Dies stellt sicher, dass unsere Seite Builder-Komponente als Hauptseite dargestellt wird.

Jetzt haben wir eine frische Angular-App für die Integration von GrapesJS bereit.

Schritt 2: Installation von GrapesJS und dem Basic Blocks-Plugin

Mit unserem Angular-Projekt fertig, installieren wir GrapesJS und das offizielle Basic Blocks-Plugin . Das Basic Blocks-Plugin bietet eine Reihe vorgefertigter Inhaltsblöcke (Text, Bilder, Spalten usw.), die wir per Drag & Drop ziehen können. Öffnen Sie ein Terminal in Ihrem Projektverzeichnis und führen Sie aus:

npm installieren grapesjs grapesjs-blocks-basic -speichern

Dadurch werden GrapesJS und das Basic Blocks-Plugin zu deinen Projektabhängigkeiten hinzugefügt. Nach der Installation müssen wir sicherstellen, dass Angular über die GrapesJS-Assets (CSS/JS-Dateien) informiert ist und TypeScript-Definitionen verwaltet.

GrapesJS-Vermögenswerte in angular.json

GrapesJS kommt mit einem eigenen CSS und wir haben auch ein Plugin-JS, das wir einbauen können. Öffne angular.json und finde die Bauoptionen für deine App (unter Projekte -> YOUR_APP_NAME -> Architekt -> Bau-> Optionen). Füge zum Beispiel die GrapesJS-Dateien zu den Styles- und Script-Arrays hinzu:

"Styles": [
"node_modules/grapesjs/dist/css/grapes.min.css",
 "src/styles.css"
],
"scripts": [
 "node_modules/grapesjs/dist/grapes.min.js", 
"node_modules/grapesjs-blocks-basic/dist/index.js"
] 

So wird sichergestellt, dass das GrapesJS-Kern-CSS und die Skripte (einschließlich des grundlegenden Blocks-Plugin-Skripts) geladen werden, wenn die App läuft. Der CSS gestaltet den GrapesJS-Editor (Canvas, Panels usw.), und die JS-Skripte machen grapesjs und das Plugin weltweit verfügbar.

TypeScript-Definitionen einrichten

Wenn Sie versuchen, GrapesJS in eine Angular TypeScript-Datei zu importieren, könnten Fehler auftreten, weil GrapesJS keine TypeScript-Typdefinitionen enthält. Um Fehler bei der TypeScript-Kompilierung zu vermeiden (z. B. "Konnte keine Deklarationsdatei für das Modul 'grapesjs' finden"), erstellen Sie eine Definitionsdatei. Im Projektordner src/ fügen Sie eine neue Datei namens grapesjs.d.ts mit folgendem Inhalt hinzu:

das Modul 'grapesjs' deklarieren;
das Modul als 'grapesjs-blocks-basic' deklarieren;

Dadurch werden die Module deklariert, sodass TypeScript sie wie beliebige behandelt und sich beim Import nicht beschwert. Jetzt sind wir bereit, GrapesJS in unserem Angular-Code zu verwenden.

(Wenn du TypeScript benutzt und stärkere Typisierung bevorzugst, bietet GrapesJS einen usePlugin-Helfer für Plugins zur Verbesserung der Typsicherheit. Der Einfachheit halber gehen wir mit dem Grundaufbau fort.)

Schritt 3: Integration von GrapesJS in eine eckige Komponente

Jetzt kommt der Hauptteil: Das Einbetten des GrapesJS-Editors in unsere Angular-Komponente. Wir werden den GrapesJS-Editor im von uns erstellten PageBuilderComponent initialisieren.

3.1 Aufbau der Komponentenvorlage

Mach page-builder.component.html auf. Wir brauchen ein Container-Element, das der GrapesJS-Editor montieren kann. Füge eine Div hinzu, die als Editor-Canvas-Container fungiert. Wir fügen auch eine einfache Überschrift als Anfangsinhalt ein (GrapesJS kann das vorhandene HTML im Container importieren). Zusätzlich fügen wir einen Speichern-Button hinzu, der den Export des Inhalts auslöst:

<button (click)="savePage()">Seite speichern</button>

<div #gjsContainer>
 <h2>My First GrapesJS Page</h2>
</div>

Hier:

• Die #gjsContainer ist eine Vorlagenreferenz, die wir verwenden, um das DOM-Element in unserer Component-Klasse zu erhalten.
• Die <h2>Meine erste GrapesJS-Seite</h2> im Container ist Beispielinhalte, die GrapesJS anfangs lädt (du kannst hier beliebige Platzhalterinhalte einfügen).

3.2 Komponentenklasse: Initialisierung von GrapesJS

Mach page-builder.component.ts auf. Wir importieren GrapesJS und das Plugin und initialisieren dann den Editor in den Lebenszyklus-Hooks der Komponente.

Importiere zuerst die notwendigen Module und deklariere eine Eigenschaft für die Editor-Instanz:

import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } aus '@angular/core';
Importiere Trauben von 'Grapesjs';
importiere basicBlocks aus 'grapesjs-blocks-basic';   Basic Blocks-Plugin
... (andere Importe wie der Service und Angular)

@Component({
 selector: 'app-page-builder', 
templateUrl: './page-builder.component.html', 
styleUrls: ['./page-builder.component.css']
})exportklasse
PageBuilderComponent implementiert AfterViewInit, OnDestroy {
 @ViewChild('gjsContainer', { static: false }) editorContainer!: ElementRef<HTMLDivElement>;
 Redakteur: Any;   wir speichern die GrapesJS-Editor-Instanz hier

 constructor(private pageService: PageService) { }

Erklärung:

• Wir verwenden @ViewChild('gjsContainer'), um die Referenz auf die <div-#gjsContainer> in unserer Vorlage zu erfassen
• . Das verschafft uns Zugriff auf das eigentliche DOM-Element, wo wir GrapesJS rendern sollen.
• Wir implementieren AfterViewInit, um GrapesJS zu initialisieren, nachdem die View bereit ist (damit editorContainer gefüllt ist), und OnDestroy, um den Editor zu bereinigen, wenn die Komponente zerstört wird.
• Wir importieren grapesjs und das Plugin (grapesjs-blocks-basic) oben. Der Plugin-Import gibt uns eine Funktion, die wir an GrapesJS weitergeben können.

Nun, innerhalb der Klasse:

ngAfterViewInit(): void {
   Initialize GrapesJS editor
  this.editor = grapesjs.init({
    Bind editor to the div element
   container: this.editorContainer.nativeElement,  using the ViewChild element:contentReference[oaicite:9]{index=9}:contentReference[oaicite:10]{index=10}
   fromElement: true,  importiere Anfangsinhalte aus dem innerHTML:contentReference[oaicite:11]{index=11}   
height: '700px',
   width: 'auto',
    deaktiviere den lokalen Speicher vorerst (kein Autosave)   
storageManager: false,   
Include the Basic Blocks plugin-Plugins
   : [basicBlocks], pluginsOpts: {
    [basicBlocks]: {     
Du kannst die Plugin-Optionen hier anpassen (z. B. welche Blöcke aufgenommen werden sollen)
    }
   }
  });

      Der GrapesJS-Editor ist jetzt montiert und sichtbar.
 }

Lassen Sie uns die wichtigen Konfigurationsoptionen aufschlüsseln, die wir an grapesjs.init() übermittelt haben:

• Container – Das Element oder der Selektor, um den Editor zu mounten. Hier übergeben wir das native DOM-Element aus unserem ViewChild (this.editorContainer.nativeElement)
• . Dadurch wird GrapesJS an die <div #gjsContainer> in unserer Vorlage angehängt.
• fromElement – Befiehlt GrapesJS, den Editor-Inhalt aus dem HTML im Container-Element zu laden
• . Da wir eine <h2>Meine erste GrapesJS-Seite</h2> in die Div eingefügt haben, beginnt der Editor damit als Komponente auf der Leinwand.
• Höhe / Breite – Legt die Maße des Editors fest. Wir verwenden 700px Höhe (du kannst das anpassen oder '100vh' verwenden) und 'Auto'-Breite, um die Containerbreite zu füllen.
• storageManager – GrapesJS verfügt über einen Storage Manager (z. B. zum Speichern in localStorage). Wir setzen dies auf falsch, um das automatische Speichern vorerst zu deaktivieren
• . Das verhindert, dass GrapesJS versucht, den Zustand automatisch zu speichern (wir übernehmen das Speichern manuell).
• Plugins – Ein Array von Plugins, die verwendet werden können. Wir fügen hier unser importiertes basicBlocks-Plugin hinzu
• . Dieses Plugin fügt dem GrapesJS Block Manager eine Reihe grundlegender Inhaltsblöcke (Text, Link, Bild, Video, Spalten usw.) hinzu.
• pluginsOpts – Optionen für die Plugins. Wir haben ein leeres Options-Objekt für basicBlocks bereitgestellt (wobei die Plugin-Funktion als Schlüssel dient). Standardmäßig fügt das Basic Blocks-Plugin alle seine Blöcke (Spalten, Text, Bild usw.) mit den Standardeinstellungen hinzu
• . (Du kannst es anpassen – zum Beispiel könntest du, um einen Block wie Map auszuschließen, Blöcke festlegen: ['column1','column2',...,'video'] und 'map' in den Optionen weglassen
• . In unserem Fall verwenden wir alle Standardblöcke.)

Nachfolgend eine Zusammenfassungstabelle der wichtigsten GrapesJS-Konfigurationsoptionen, die wir verwendet haben, und ihrer Wirkung:

Nach dem Aufruf von grapesjs.init(...) erscheint die GrapesJS-Editor-Benutzeroberfläche in unserer Komponente. Standardmäßig lädt GrapesJS mit einer Reihe von Panels und Buttons. Zum Beispiel siehst du eine obere Leiste mit Optionen (wie das Umschalten des Block-Panels, rückgängig/neu machen usw.), eine Leinwand in der Mitte (wo das <h2> erscheint) und rechts ein Stil-/Einstellungspanel. Auf der linken Seite befindet sich ein Blockpanel mit den vom Plugin bereitgestellten Basisblöcken (Text, Link, Bild, Video usw.). Du kannst diese Blöcke auf die Leinwand ziehen, um deine Seite zu erstellen.

Tipp: Standardmäßig ist das Block-Panel in GrapesJS versteckt, bis man auf die Schaltfläche "Blocks" (oben links) klickt. Klicken Sie auf das Blocks-Symbol , um das Block-Panel zu aktivieren und die verfügbaren Drag-and-Drop-Blöcke zu sehen. Die Standard-Benutzeroberfläche von GrapesJS enthält diesen Schaltknopf. Falls nötig, kannst du GrapesJS so konfigurieren, dass das Block-Panel standardmäßig angezeigt wird (zum Beispiel durch ein benutzerdefiniertes Panel oder die AppendTo-Option in der blockManager-Konfiguration), aber vorerst ist das Standardverhalten in Ordnung.

3.3 Aufräumen: Den Editor auf Component Destroy zerstören

Um Speicherlecks oder Probleme zu vermeiden, wenn unsere Komponente entlastet, ist es gute Praxis, die GrapesJS-Editor-Instanz zu zerstören, wenn die Komponente zerstört wird. Wir implementieren ngOnDestroy für unsere Komponente:

 ngOnDestroy(): void {
  if (this.editor) {
   this.editor.destroy();
  }
 }
}

Dies ruft die destroy()-Methode des Editors auf, um Ereignislistener und freie Ressourcen ordnungsgemäß zu entlasten. GrapesJS stellt editor.destroy() für diesen Zweck bereit (es löst intern Destroy Events aus, um aufzuräumen). Unsere GrapesJS-Instanz endet sauber, wenn der Benutzer sich von der Komponente entfernt.

Inzwischen ist GrapesJS vollständig in Angular integriert. Du kannst ng serve ausführen und zur Verifizierung in die App navigieren: Du solltest die GrapesJS-Editor-Oberfläche sehen, mit deiner Beispielüberschrift auf der Leinwand und einer Symbolleiste. Versuche, einen Block (z. B. einen Text- oder Bildblock) aus dem Blocks-Panel in die Leinwand zu ziehen, um sicherzustellen, dass alles funktioniert.

Schritt 4: HTML und CSS aus GrapesJS exportieren

Eine der mächtigen Funktionen von GrapesJS ist, dass man die vom Nutzer erstellte Seite als sauberes HTML und CSS exportieren kann. Wir haben in unserer Vorlage einen "Seite speichern"- Button hinzugefügt; jetzt implementieren wir die Logik, um HTML/CSS aus GrapesJS zu extrahieren, wenn dieser Button angeklickt wird.

In unserer PageBuilderComponent-Klasse haben wir bereits eine savePage()-Methode mit dem Button verbunden. Lassen Sie es uns umsetzen:

 savePage(): void {
   Hol das HTML und CSS vom GrapesJS-Editor
  const html = this.editor.getHtml();
  const css = this.editor.getCss();
  console.log('Exportierte HTML:', html);
  console.log('Exported CSS:', css);

   Optional senden Sie den Inhalt an das Backend  
this.pageService.savePage(html, css).subscribe({
   next: response => console.log('Page saved erfolgreich!', response),
   error: err => console.error('Fehler speichert Seite:', err)
  });
 }

Hier verwenden wir die API-Methoden getHtml() und getCss() von GrapesJS Editor, um das aktuelle HTML-Markup und die CSS-Stile von der Leinwand abzurufen. GrapesJS liefert die HTML-Zeichenkette dessen, was sich in der Canvas befindet (die designte Seite), sowie den CSS-String für alle angewendeten Stile (einschließlich Klassen usw.). Wir loggen sie vorerst in die Konsole und rufen dann einen Dienst an, um sie tatsächlich zu speichern.

In dieser Phase solltest du, wenn du in der laufenden App auf die Schaltfläche "Seite speichern" klickst, das generierte HTML und CSS in der Browser-Konsole ausgedruckt sehen. Zum Beispiel könnte das HTML eine <div> Struktur mit deinen Blöcken und Inhalten zeigen, und CSS könnte Klassen enthalten, die GrapesJS für das Styling erstellt hat.

Schritt 5: Veröffentlichen des Seiteninhalts in einem Backend (Angular Service)

In einer realen App möchtest du wahrscheinlich das Seitendesign des Nutzers auf einem Backend-Server speichern (z. B. zur Speicherung in einer Datenbank oder einem Dateisystem). Wir simulieren das, indem wir einen Angular-Service erstellen, der HTML/CSS an einen Backend-API-Endpunkt sendet.

5.1 Schaffung des Dienstes

Erstellen Sie einen neuen Dienst (falls Sie das noch nicht getan haben) namens PageService:

ng generate service page

Das schafft page.service.ts. In diesem Service verwenden wir Angulars HttpClient, um den Seiteninhalt in eine API zu posten. Stelle sicher, dass du HttpClientModule in dein AppModule importierst (in app.module.ts), damit HttpClient verfügbar ist.

Öffnen Sie nun page.service.ts und implementieren Sie eine Methode, um die Seite zu speichern:

import { Injectable } aus '@angular/core';
importieren { HttpClient } von '@angular/common/http';
importieren { Observable } aus 'rxjs';

@Injectable({
 providedIn: 'root'}
)
exportklasse PageService {
 private apiUrl = '/api/pages';   URL zum Backend-Endpunkt (bei Bedarf ändern)

 Konstruktor(privat http: HttpClient) { }

 savePage(html: String, css: String): Observable<any> {
  const payload = { html, css };
   POST das HTML/CSS ins Backend (ersetzt durch deinen eigentlichen API-Endpunkt),
  return this.http.post(this.apiUrl, Payload);
 }
}

In diesem Code:

• Wir definieren eine apiUrl (z. B. '/api/pages'), die auf Ihren Backend-Endpunkt verweisen soll, der das Speichern der Seitendaten übernimmt. In einer echten App ersetze das durch eine echte URL (zum Beispiel eine API-Route auf deinem Server). Zur Demonstration verwenden wir einen relativen Pfad.
• Die savePage-Methode akzeptiert die HTML- und CSS-Zeichenketten, packt sie in eine JSON-Nutzlast und verwendet HttpClient.post, um die Daten an den Server zu senden.
• Wir geben eine Observable zurück, damit der Anrufer abonnieren und die Antwort oder Fehler bearbeiten kann.

Stellen Sie sicher, dass dieser Dienst im Root bereitgestellt wird (was über die @Injectable ProvidedIn-Eigenschaft der Fall ist). Wir haben diesen Service früher über den Konstruktor in unseren PageBuilderComponent eingeschleust.

5.2 Nutzung des Dienstes in der Komponente

Wir haben bereits PageService in die Komponente eingefügt und this.pageService.savePage(html, css).subscribe(...) in der savePage()-Methode aufgerufen. Das sendet die Anfrage, wenn der Button angeklickt wird. In einer echten Implementierung könnte man nach einem erfolgreichen Speicherstand eine Erfolgsmeldung anzeigen oder navigieren usw. Für unsere Zwecke protokollieren wir einfach das Ergebnis.

Wenn du nun die Anwendung startest und auf "Seite speichern" klickst, sendet die App eine POST-Anfrage mit dem Seiteninhalt an den angegebenen Endpunkt. Das können Sie im Netzwerk-Tab für Entwicklungstools Ihres Browsers überprüfen. (Wenn Sie an dieser URL kein Backend laufen lassen, erhalten Sie einen Fehler – was zu erwarten ist. In der Praxis würdest du das Backend implementieren, um die Anfrage zu bearbeiten. Im Moment liegt unser Fokus auf der Frontend-Integration.)

Fazit

Herzlichen Glückwunsch! Du hast einen einfachen Drag-and-Drop-Seiten-Builder in Angular mit GrapesJS gebaut. 🎉

In diesem Leitfaden sagen wir:

• Richte ein Angular-Projekt und eine Komponente für den Page Builder ein (mit Angular v20).
• Ich habe GrapesJS und das offizielle grapesjs-blocks-basic-Plugin für einsatzbereite Blöcke installiert.
• GrapesJS in eine Angular-Komponente integriert mit korrektem Lebenszyklusmanagement (initialisieren in ngAfterViewInit und zerstören in ngOnDestroy).
• Ich habe GrapesJS mit den wichtigsten Optionen konfiguriert und das Basic Blocks-Plugin geladen, um ziehbare Inhaltsblöcke bereitzustellen.
• Ich habe das HTML und CSS der Seite mit GrapesJS-APIs exportiert und einen Angular-Dienst implementiert, um diese Daten an ein Backend zu senden.

Die Nutzung von GrapesJS innerhalb von Angular bietet Endnutzern eine leistungsstarke Möglichkeit, ein visuelles Seitenaufbau-Erlebnis zu bieten und gleichzeitig das Ökosystem von Angular zu nutzen. Du kannst diese Grundlage erweitern, indem du mehr GrapesJS-Plugins hinzufügst (zum Beispiel Rich-Text-Editoren, benutzerdefinierte Blöcke usw.), die Benutzerauthentifizierung zum Speichern von Seiten überbrückst und sogar eine Bibliothek mit benutzerdefinierten Blöcken für deine Anwendung aufbaust. GrapesJS ist sehr erweiterbar – man könnte benutzerdefinierte Block-Plugins erstellen oder den Style-Manager integrieren, damit Nutzer Styles freier anpassen können.

Nächste Schritte: Du könntest die anderen Funktionen von GrapesJS wie den Style Manager und Trait Manager erkunden, die in unserer Einrichtung automatisch aktiviert wurden (die rechte Seitenleiste im Editor erlaubt es, Stile ausgewählter Elemente usw. zu ändern). Du kannst den Storage Manager auch so konfigurieren, dass er Daten speichert (z. B. zu localStorage oder direkt zu deinem Backend über die Remote-Speicheroption von GrapesJS), anstatt eine manuelle Speichertaste zu verwenden. Für eine fortgeschrittenere Einrichtung sollten Sie GrapesJS-Presets (wie grapesjs-preset-webpage) verwenden, die eine Sammlung von Plugins für einen voll ausgestatteten Seiteneditor bündeln – in diesem Tutorial sind wir jedoch bei den Grundlagen geblieben, um zu zeigen, wie alles unter der Haube funktioniert.

Wir hoffen, dieses Tutorial war hilfreich. Viel Spaß beim Programmieren und viel Spaß beim Erstellen großartiger Seitenbauer mit Angular und GrapesJS! 🚀