Warum GrapesJS zu Express / Node passt
GrapesJS läuft im Browser, sodass Express lediglich die Editor-Seite und zwei Editoren anbietet JSON-Routen – eine, um das gespeicherte Projekt zu laden, eine, um es zu speichern. Dieser Leitfaden dient der Editor, speichert Inhalte mit Node und exportiert HTML/CSS.
1. Der Express-Server
import express from 'express';
const app = express();
app.use(express.json());
app.use(express.static('public')); // serves public/index.html
let page = {}; // swap for a real DB
app.get('/load', (req, res) => res.json(page));
app.post('/save', (req, res) => {
page = req.body; // full GrapesJS project
res.json({ status: 'ok' });
});
app.listen(3000, () => console.log('http://localhost:3000'));2. Die Editor-Seite
Erstellen public/index.htmlSie :
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
<div id="gjs"><h1>Edit me</h1></div>
<script src="https://unpkg.com/grapesjs"></script>
<script>
grapesjs.init({
container: '#gjs',
height: '100vh',
fromElement: true,
storageManager: {
type: 'remote',
stepsBeforeSave: 3,
options: { remote: { urlStore: '/save', urlLoad: '/load' } },
},
});
</script>Da die Seite und die API denselben Express-Ursprung teilen, gelten Anfragen Derselbe Herkunft und du vermeidest die CORS-Konfiguration komplett.
3. Persistenz in einer echten Datenbank
app.post('/save', async (req, res) => {
await db.pages.updateOne(
{ key: 'home' },
{ $set: { project: req.body, html: req.body['gjs-html'], css: req.body['gjs-css'] } },
{ upsert: true }
);
res.json({ status: 'ok' });
});Produktionstipps
Ein Prototyp, der die Seite in einer Variablen speichert, überlebt einen Neustart nicht – bleibt in einer Datenbank (einer JSON/JSONB-Spalte oder einem Mongo-Dokument) gespeichert, die für eine Seite gespeichert ist. GrapesJS-Projekte können groß sein, also erhöhen Sie das Körperlimit von Express (express.json({ limit: '5mb' })) oder speichern Sie stillschweigend mit 413. Schützen Sie die Store-Route mit Authentifizierung, damit niemand eine Seite überschreiben kann, und servieren Sie den Editor und die API vom selben Express-Ursprungsort, um das CORS komplett zu vermeiden. Wenn sie unterschiedlich sein müssen, aktiviere CORS für den Editor-Ursprung und erlaube den Header Content-Type .
Voraussetzungen
Du brauchst Node.js 18+ und Express 4 oder 5. GrapesJS läuft im Browser, also Express bedient die Editor-Seite und zwei JSON-Routen – Laden und Speichern. Vertrautheit mit Middleware, Routing und JSON-Body-Parsing reichen aus.
Fügen Sie benutzerdefinierte Blöcke zum Editor hinzu
Registrieren Sie ziehbare Blöcke mit dem Blockmanager nach grapesjs.init:
editor.BlockManager.add('hero', {
label: 'Hero section',
category: 'Sections',
content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});Ziehe fertige Blockbibliotheken und Presets aus GJS.Market für ein reichhaltigeres Set.
Persistenz in einer echten Datenbank
Ein Prototyp, der die Seite in einer Variablen speichert, übersteht einen Neustart nicht. Persistieren Sie in einer Datenbank, die per Seite verschlüsselt ist:
app.post('/save', async (req, res) => {
await db.pages.updateOne(
{ key: 'home' },
{ $set: { project: req.body, html: req.body['gjs-html'], css: req.body['gjs-css'] } },
{ upsert: true }
);
res.json({ status: 'ok' });
});
app.get('/load', async (req, res) => {
const page = await db.pages.findOne({ key: 'home' });
res.json(page?.project ?? {});
});Aufführungstipps
GrapesJS-Projekte können groß sein, also erhöhen Sie das Körperlimit von Express
(express.json({ limit: '5mb' })) oder Speicherstände scheitern mit 413. Serviere die
Editor und API vom selben Ursprung stammen, um CORS zu vermeiden. Cache die gerenderte Ausgabe und
Mach es beim Speichern, damit Besucher nie die Renderkosten zahlen.
Sicherheitsaspekte
Schütze die Store-Route mit Authentifizierung, damit niemand eine Seite überschreiben kann. Wenn die
Editor und API auf unterschiedlichen Ursprüngen leben, CORS nur für den Editor-Ursprung aktivieren und
Erlauben Sie den Header Content-Type . Desinfizieren Sie gespeicherte Markup-Ausgaben beim Ausgang, falls
Nicht-Administratoren können bearbeiten. Validiere die Nutzlastgröße.
Fehlerbehebung häufiger Fehler
413 Nutzlast Zu groß bedeutet, dass der JSON das Körperlimit überschreitet – erhöhen es. Ein CORS-Fehler bedeutet, dass der Editor und die API auf unterschiedlichen Ursprüngen liegen ohne konfiguriertes CORS. Eine ungestylte oder leere Leinwand bedeutet die Stylesheet wurde nicht geladen oder der Container war nicht vorhanden.
Wann man GrapesJS mit Express / Node verwenden sollte
GrapesJS passt zu einer individuellen Node-App, die einen eingebetteten visuellen Editor mit deinem eigenen benötigt Speicher – ein SaaS-Seitenbauer, ein E-Mail-Komponist, eine CMS-Oberfläche. Für Inline-Rich Text, ein leichterer Editor reicht aus; Für eine ganzseitige Komposition mit Layout, Styling, und sauberen Export ist GrapesJS die stärkere, vom MIT lizenzierte Wahl.
Nächste Schritte
Siehe die zugehörigen GrapesJS + React und GrapesJS + Laravel Guides, Durchsuchen Sie Storage Adapter Plugins und die GrapesJS-Marktplatz oder starte mit dem GJS.Market-Startseite.
FAQ
Wie kommuniziert GrapesJS mit einem Express-Backend?
Setze den Storage Manager auf type: 'remote' mit
urlStore/urlLoad zeigt auf Expresslinien; addieren
express.json() und lies req.body.
Wo sollte Node das Projekt speichern?
Eine JSON-Spalte, ein MongoDB-Dokument oder eine Datei für einen Prototyp – speichern Sie die vollständige Datei Projekt plus optionales HTML/CSS.
Wie vermeide ich CORS-Probleme?
Bereite den Editor und die API vom selben Express-Ursprung aus, sodass Anfragen gleicher Herkunft; ansonsten aktivieren Sie CORS für den Editor-Ursprung.