Die zwei Methoden, die du brauchst
GrapesJS stellt die aktuelle Seite als Strings editor.getHtml() frei: für
Markup und editor.getCss() für Styles. Alles andere – voll
Dokumente, Downloads, ZIPs – baut auf diesen beiden auf.
1. HTML und CSS lesen
const html = editor.getHtml();
const css = editor.getCss();2. Ein vollständiges Dokument zusammenstellen
const doc = `<!doctype html>
<html>
<head><meta charset="utf-8"><style>${css}</style></head>
<body>${html}</body>
</html>`;
// Store `doc`, or render it server-side.3. Zeigen Sie ein Exportmodal an
// Built-in: opens a modal with the current HTML/CSS for copy-paste.
editor.runCommand('export-template');4. Laden Sie eine ZIP herunter (index.html + style.css)
import grapesjs from 'grapesjs';
import exportPlugin from 'grapesjs-plugin-export';
const editor = grapesjs.init({
container: '#gjs',
plugins: [exportPlugin],
pluginsOpts: { 'grapesjs-plugin-export': {} },
});
// Trigger the ZIP download:
editor.runCommand('gjs-export-zip');Tipp: Kontrollieren Sie, welches CSS enthalten ist
// e.g. include rules even for components not currently on the canvas
const css = editor.getCss({ keepUnusedStyles: true });Tipps
Passen Sie den Export mit dem Ziel ab. Für E-Mails solltest du das CSS inline (über ein Tool wie juice, oder mit dem MJML-Preset bauen), da die meisten Clients Blöcke ignorieren <style> . Für wiederverwendbare Vorlagen geben Sie getCss({ keepUnusedStyles: true }) die Regeln für Komponenten, die derzeit nicht auf der Leinwand sind, erhalten. Der ZIP-Export aus grapesjs-plugin-export ist großartig für die Übergabe, aber für programmatische Veröffentlichungen getHtml()lesen /getCss() direkt lesen und speichern. Egal, welches Ziel es ist, das Markup vor der Veröffentlichung zu bereinigen, wenn der Redakteur offen für nicht vertrauenswürdige Nutzer war.
Voraussetzungen
Du brauchst einen laufenden GrapesJS-Editor. Alles unten basiert auf zwei Methoden –
editor.getHtml() und editor.getCss() — die Strings zurückgeben
Du kannst speichern, rendern oder verpacken.
Kontrollieren Sie, welches CSS enthalten ist
getCss() Akzeptiert Optionen. Behalten Sie Regeln für Komponenten, die derzeit nicht auf der
Canvas (nützlich für wiederverwendbare Vorlagen) oder einen spezifischen Komponentenumfang durchlaufen:
const css = editor.getCss({ keepUnusedStyles: true });Export für E-Mail (inline CSS)
Die meisten E-Mail-Clients ignorieren <style> Blockaden, daher solltest du vorher das CSS einbauen
senden – entweder mit dem MJML-Preset bauen oder das exportierte HTML/CSS über ein
Inliner wie juice:
import juice from 'juice';
const inlined = juice(`<style>${editor.getCss()}</style>${editor.getHtml()}`);Laden Sie eine ZIP herunter
import exportPlugin from 'grapesjs-plugin-export';
const editor = grapesjs.init({ container: '#gjs', plugins: [exportPlugin] });
editor.runCommand('gjs-export-zip'); // index.html + style.cssDen Export programmatisch aufrechterhalten
Beim Publizieren lesen Sie die Strings direkt und POSTEN Sie sie in Ihr Backend, anstatt
Verlassen Sie sich auf einen Download — Store html, css, und das vollständige
project So rendert die Seite sowohl schnell als auch öffnet sich im Editor erneut.
Best Practices
Den Export mit dem Ziel abgleichen: Inline CSS für E-Mail, ein vollständiges Dokument für Eigenständige Seiten, separate HTML/CSS-Spalten für ein CMS. Desinfizieren Sie den exportierten Aufschlag vorher veröffentlicht, wenn der Editor für unzuverlässige Nutzer offen war. Versionen deiner gespeicherten Projekte so Du kannst einen schlechten Schnitt rückgängig machen.
Nächste Schritte
Speichern Sie den Export auf Ihren Server mit dem Storage Manager Backend Führen oder den Export in ein wiederverwendbares Format einpacken Benutzerdefiniertes Plugin. Durchstöbern GrapesJS-Plugins auf GJS.Market.
FAQ
Wie bekomme ich HTML und CSS aus GrapesJS?
editor.getHtml() und editor.getCss() den Aufschlag zurückzugeben
und Styles als Streicher.
Wie erlaube ich Nutzern, eine ZIP-Datei herunterzuladen?
Addieren grapesjs-plugin-export und ausführen die
gjs-export-zip Befehl, um einen index.html plus style.css herunterzuladen.
Enthält getCss nur gebrauchte Stile?
Standardmäßig gibt es die verwalteten Stile für die aktuelle Seite zurück; Passoptionen wie
keepUnusedStyles um das zu ändern.