Warum GrapesJS zu Laravel passt
GrapesJS ist ein framework-unabhängiger, MIT-lizenzierter Editor, der vollständig in der browser, sodass er sauber mit Laravel kombiniert wird: Laravel bedient die Editor-Seite und stellt ein paar Routen zum Laden und Speichern von Inhalten frei, während GrapesJS die Leitung übernimmt Drag-and-Drop-Benutzeroberfläche im Client. Diese Anleitung erstellt ein funktionierendes Setup – eine Blade-Ansicht der den Editor hostet, einen Controller, der Inhalte mit CSRF-Schutz speichert, und HTML/CSS-Export.
1. GrapesJS in einer Blade-Ansicht laden
Der schnellste Start ist ein CDN-Include. Erstellen resources/views/editor.blade.php Sie
und ein CSRF-Metatag hinzufügen, damit die Speicheranfrage authentifizieren kann.
<!doctype html>
<html>
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
</head>
<body>
<div id="gjs"><h1>Edit me in GrapesJS</h1></div>
<script src="https://unpkg.com/grapesjs"></script>
<script src="/js/editor.js"></script>
</body>
</html>Bevorzugen Sie eine gebündelte Asset-Pipeline? npm install grapesjs und importieren
über Vite statt CDN – der Editor-Code ist identisch.
2. Initialisieren Sie den Editor mit Remote-Speicher
In public/js/editor.js, lesen Sie das CSRF-Token aus dem Meta-Tag und
den Storage Manager auf POST zu Laravel konfigurieren.
const csrf = document
.querySelector('meta[name="csrf-token"]')
.getAttribute('content');
const editor = grapesjs.init({
container: '#gjs',
height: '100vh',
fromElement: true,
storageManager: {
type: 'remote',
stepsBeforeSave: 3,
options: {
remote: {
urlStore: '/editor/save',
urlLoad: '/editor/load',
headers: { 'X-CSRF-TOKEN': csrf },
},
},
},
});3. Fügen Sie die Laravel-Routen und den Controller hinzu
Registrieren Sie die Seite plus die Lade-/Speicher-Endpunkte in routes/web.php:
use App\Http\Controllers\EditorController;
Route::get('/editor', [EditorController::class, 'show']);
Route::get('/editor/load', [EditorController::class, 'load']);
Route::post('/editor/save', [EditorController::class, 'save']);Der Controller speichert das GrapesJS-Projekt-JSON (und optional auch das gerenderte Projekt) HTML/CSS) auf einem Modell:
class EditorController extends Controller
{
public function show()
{
return view('editor');
}
public function load()
{
$page = Page::firstOrCreate(['key' => 'home']);
// GrapesJS expects the stored project data back as JSON.
return response()->json($page->project ?? []);
}
public function save(Request $request)
{
$data = $request->all();
Page::updateOrCreate(
['key' => 'home'],
[
'project' => $data, // full editable project
'html' => $data['gjs-html'] ?? null,
'css' => $data['gjs-css'] ?? null,
]
);
return response()->json(['status' => 'ok']);
}
}Weil die Anfrage den X-CSRF-TOKEN Kopfball enthält, Laravels
web Die Middleware-Gruppe akzeptiert die POST, ohne CSRF zu deaktivieren
Schutz. Speichern project Sie als JSON/'JSON'-Spalte, sodass sie hin und her läuft
sauber.
4. Rendern Sie die exportierte Seite
Zum Veröffentlichen lesen Sie das gespeicherte HTML und CSS in einer Blade-Ansicht:
<style>{!! $page->css !!}</style>
{!! $page->html !!}Behandeln Sie gespeichertes Markup nur dann als vertrauenswürdig, wenn Ihre Editoren vertrauenswürdig sind; Desinfizieren Ausgabe, wenn Endnutzer Seiten bearbeiten können.
Voraussetzungen
Du brauchst 8,1+ PHP und eine Laravel 10- oder 11-Anwendung. Node.js ist optional — du kannst GrapesJS aus einem CDN in einer Blade-Ansicht laden oder es über Vite bündeln, falls Du bevorzugst eine Asset-Pipeline. Kein Laravel-spezifisches GrapesJS-Paket ist erforderlich; der Editor ist ein einfaches Browser-JavaScript, das über HTTP mit deinen Routen kommuniziert. A Ein Arbeitsverständnis von Blade, Routen, Controllern und CSRF reicht aus, um auszuliefern Diese Integration.
Fügen Sie benutzerdefinierte Blöcke zum Editor hinzu
Gib deinen Editoren etwas, das du auf die Leinwand ziehen kannst, indem du Blöcke mit
der Blockmanager nach grapesjs.init:
editor.BlockManager.add('hero', {
label: 'Hero section',
category: 'Sections',
content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});
editor.BlockManager.add('cta', {
label: 'Call to action',
category: 'Sections',
content: '<div class="cta"><a href="#">Get started</a></div>',
});Für eine reichhaltigere Auswahl an produktionsreifen Blöcken, Presets und Lagerhelfern, ziehe Plugins von GJS.Market, anstatt gängige Muster von Hand neu zu bauen.
Speichere das Projekt in einer JSON-Spalte
Behalten Sie das vollständige editierbare Projekt bei, sodass sich eine Seite im Editor genau so öffnet, wie sie es ist war, und behalte das gerenderte HTML/CSS in eigenen Spalten für schnelles Servieren. A Migration:
Schema::create('pages', function (Blueprint $table) {
$table->id();
$table->string('key')->unique();
$table->json('project')->nullable(); // full GrapesJS project
$table->longText('html')->nullable();
$table->longText('css')->nullable();
$table->timestamps();
});public function save(Request $request)
{
$data = $request->all();
Page::updateOrCreate(
['key' => 'home'],
[
'project' => $data,
'html' => $data['gjs-html'] ?? null,
'css' => $data['gjs-css'] ?? null,
]
);
Cache::forget('page:home'); // bust the published cache
return response()->json(['status' => 'ok']);
}Autorisiere die Speicherroute
CSRF schützt vor gefälschten Anfragen, aber du brauchst trotzdem eine Autorisierung, also nur Die richtigen Nutzer können eine Seite bearbeiten. Sperren Sie die Route mit einer Richtlinie oder Middleware ein:
Route::post('/editor/save', [EditorController::class, 'save'])
->middleware(['auth', 'can:edit-pages']);Rendere die veröffentlichte Seite (zwischengespeichert)
Bereite das gespeicherte HTML/CSS aus dem Cache aus, damit Besucher nie die Rendering des Editors zahlen Kosten, und es beim Speicherstand ungültig machen:
public function show()
{
$page = Cache::remember('page:home', 3600, fn () =>
Page::where('key', 'home')->first()
);
return view('page', ['page' => $page]);
}Aufführungstipps
Lade GrapesJS nur auf dem Editor-Bildschirm, nicht seitenweit, und verschiebe das Skript so
Es blockiert nie die erste Farbe. Cache die gerenderte Ausgabe (Laravel-Cache oder ein CDN)
Und es beim Speichern zerstören. Wenn das Exportieren oder Nachbearbeiten von HTML viel ist, schieben Sie es auf ein
Warteschlang, sodass die Speicheranfrage sofort zurückkehrt. Speichern project wie
Eine echte json/jsonb Kolumne, damit Teillektüren günstig bleiben.
Sicherheitsaspekte
Behalten Sie den CSRF-Schutz aktiv – senden Sie das Token in den Header X-CSRF-TOKEN
anstatt sie VerifyCsrfTokenzu deaktivieren. Autorisieren Sie jede Zustandsänderung
Route. Behandle gespeicherte Markup-Daten als nicht vertrauenswürdig, wenn Nicht-Administratoren Seiten bearbeiten können: Desinfiziere es
auf Ausgabe (zum Beispiel mews/purifier) statt rohes HTML zu echoen.
Validiere die Größe der eingehenden Nutzlast, damit ein großes Projekt den Speicher nicht erschöpfen kann.
Fehlerbehebung häufiger Fehler
419 Seite Abgelaufen bedeutet, dass das CSRF-Token fehlt – bestätigen Sie das
csrf-token Meta-Tag ist vorhanden und wird als X-CSRF-TOKENgesendet.
Eine ungestylte Leinwand bedeutet, dass das GrapesJS-Stylesheet nicht geladen wurde.
Ein leerer Editor bedeutet normalerweise, dass der Container-Selektor nicht übereinstimmt
Ein Element auf der Seite. 413 Nutzlast zu groß bedeutet, dass das Projekt
JSON überschreitet dein Upload-/Körperlimit – Raise post_max_size oder das
Framework-Limit.
Wann man GrapesJS mit Laravel verwenden sollte
GrapesJS passt, wenn Ihre Laravel-App einen eingebetteten visuellen Editor für Ihre Nutzer benötigt Control — Landingpages, E-Mail-Vorlagen, ein White-Label-Seiten-Builder — unterstützt von Ihre eigene Datenbank und von Ihrer eigenen Infrastruktur bereitgestellt. Für einfachen Rich-Text innerhalb eines Formfeldes reicht ein leichtes WYSIWYG aus; für ganzseitige Kompositionen mit Layout, Styling und sauberem HTML/CSS-Export ist GrapesJS das stärkere, MIT-lizenzierte, selbstgehostete Wahl.
Produktionstipps
Ein paar Optionen machen ein Laravel + GrapesJS-Setup produktionsbereit. Speichere das Editor-Projekt in einer json Spalte (oder jsonb auf PostgreSQL), damit es verlustfrei hin und her zurückgeht, und behalte die gerenderten html/css in separaten Spalten, die du direkt servieren kannst. Cache das gerenderte Output (Laravel-Cache oder ein CDN) und zerstöre es beim Speichern, damit Besucher nie auf den Editor warten. Behalten Sie den CSRF-Schutz an – senden Sie das Token in den X-CSRF-TOKEN Header, anstatt es VerifyCsrfTokenzu deaktivieren. Schließlich, wenn Editoren misstraut werden können, bereinigen Sie gespeichertes Markup bei der Ausgabe (z. B. mews/purifier) anstatt rohes HTML zu wiederholen, da GrapesJS alles Einklebte treu speichert.
Nächste Schritte
Füge Blöcke und Plugins hinzu, um zu deinem Designsystem zu passen. Siehe die verwandte GrapesJS + React und GrapesJS + Vue Guides, durchstöbern Speicheradapter-Plugins und die vollständigen GrapesJS-Marktplatz oder starte mit dem GJS.Market-Startseite.
FAQ
Wie speichere ich GrapesJS-Inhalte im Laravel-Backend?
Konfigurieren Sie den Storage Manager mit type: 'remote' und Point
urlStore/urlLoad an den Laravel-Routen. Senden Sie das CSRF-Token
Im Header X-CSRF-TOKEN speichern Sie dann HTML, CSS und Projekt
JSON bei einem Modell.
Braucht GrapesJS in Laravel einen Build-Schritt?
Nein. Lade es aus einem CDN in einer Blade-Ansicht für die einfachste Einrichtung oder importiere es über Vite/Laravel Mix, wenn du eine Bündelpipeline bevorzugst. Der Editor ist ein einfacher Browser JavaScript so oder so.
Wie gehe ich mit CSRF um, wenn GrapesJS bei Laravel postet?
Füge deinem Layout ein csrf-token Meta-Tag hinzu und gib seinen Wert als das
X-CSRF-TOKEN Header im Storage Manager's headers
Option. Laravels Web-Middleware akzeptiert dann die Speicheranfrage.