Por qué GrapesJS encaja con Laravel
GrapesJS es un editor independiente del framework, licenciado por el MIT, que funciona completamente en el navegador, para que se empareje limpiamente con Laravel: Laravel ofrece la página del editor y Expone un par de rutas para cargar y almacenar contenido, mientras que GrapesJS se encarga de la interfaz de arrastrar y soltar en el cliente. Esta guía construye una configuración funcional: una vista Blade que aloja el editor, un controlador que persiste contenido con protección CSRF, y exportación HTML/CSS.
1. Cargar GrapesJS en vista Blade
El inicio más rápido es un CDN incluido. Crear resources/views/editor.blade.php
y añadir una meta etiqueta CSRF para que la solicitud de guardado pueda autenticarse.
<!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>¿Prefieres una pipeline de activos agrupados? npm install grapesjs y importarlo
a través de Vite en lugar de la CDN — el código del editor es idéntico.
2. Inicializar el editor con almacenamiento remoto
En public/js/editor.js, lee el token CSRF de la etiqueta meta y
configura el Gestor de Almacenamiento para que se traslade a Laravel.
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. Añadir las rutas de Laravel y el controlador
Registra la página más los endpoints de carga/almacenamiento en 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']);El controlador almacena el JSON del proyecto GrapesJS (y opcionalmente el renderizado HTML/CSS) sobre un modelo:
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']);
}
}Como la solicitud lleva el X-CSRF-TOKEN encabezado, Laravel's
web El grupo middleware acepta el POST sin desactivar CSRF
protección. Guarda project como una columna JSON/'json' para que sea de ida y vuelta
Limpiamente.
4. Renderizar la página exportada
Para publicar, lee el HTML y CSS almacenados en una vista Blade:
<style>{!! $page->css !!}</style>
{!! $page->html !!}Trata el marcado almacenado como confiable solo si tus editores son de confianza; Sanear Salida si los usuarios finales pueden editar páginas.
Requisitos previos
Necesitarás PHP 8.1+ y una aplicación Laravel 10 o 11. Node.js es opcional — puedes cargar GrapesJS desde una CDN en una vista Blade, o agruparlo a través de Vite si Prefieres una canalización de activos. No se requiere ningún paquete GrapesJS específico para Laravel; el editor es JavaScript simple para navegador que comunica con tus rutas a través de HTTP. A Un entendimiento funcional de Blade, rutas, controladores y CSRF es suficiente para enviar esta integración.
Añadir bloques personalizados al editor
Dale a tus editores algo para arrastrar al lienzo registrando bloques con
el Gestor de Bloques después grapesjs.initde:
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>',
});Para un conjunto más rico de bloques, presets y auxiliares de almacenamiento listos para producción, pull plugins de GJS. Mercado en lugar de reconstruir patrones comunes a mano.
Guarda el proyecto en una columna JSON
Persiste el proyecto editable completo para que una página se vuelva a abrir en el editor exactamente como y mantienen el HTML/CSS renderizado en sus propias columnas para servicio rápido. A Migración:
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']);
}Autorizar la ruta de guardado
CSRF protege contra solicitudes falsificadas, pero aún necesitas autorización, así que solo los usuarios adecuados pueden editar una página. Bloquea la ruta con una política o middleware:
Route::post('/editor/save', [EditorController::class, 'save'])
->middleware(['auth', 'can:edit-pages']);Renderizar la página publicada (en caché)
Sirve el HTML/CSS almacenado desde la caché para que los visitantes nunca paguen el render del editor Coste y invalida la partida guardada:
public function show()
{
$page = Cache::remember('page:home', 3600, fn () =>
Page::where('key', 'home')->first()
);
return view('page', ['page' => $page]);
}Consejos de rendimiento
Carga GrapesJS solo en la pantalla del editor, no en todo el sitio, y pospone su script así
Nunca bloquea la primera pintura. Almacenar en caché la salida renderizada (caché Laravel o CDN)
Y lo rompes en la partida. Si exportar o postprocesar HTML es pesado, súbelo a un
El trabajo se colocó en cola para que la solicitud de guardado vuelva inmediatamente. Almacenar project como
Un verdadero json/jsonb columna, así que las lecturas parciales siguen siendo baratas.
Consideraciones de seguridad
Mantén activada la protección CSRF — envía el token en la X-CSRF-TOKEN cabecera
en lugar de VerifyCsrfTokendesactivar. Autorizar cada cambio de estado
Ruta. Trata el marcado almacenado como no confiable si los no administradores pueden editar páginas: desinfectarlo
en la salida (por ejemplo mews/purifier) en lugar de repetir HTML en bruto.
Valida el tamaño de la carga útil entrante para que un proyecto enorme no pueda agotar la memoria.
Resolución de errores comunes
419 Página Caducada significa que falta el token CSRF — confirma el
csrf-token La meta etiqueta está presente y se envía como X-CSRF-TOKEN.
Un lienzo sin estilo significa que la hoja de estilo GrapesJS no se cargó.
Un editor en blanco suele significar que el selector de contenedores no coincidió
un elemento en la página. 413 Carga Demasiado Grande significa que el proyecto
JSON supera tu límite de subida/cuerpo — subir post_max_size o el
Límite del marco.
Cuándo usar GrapesJS con Laravel
GrapesJS encaja cuando tu app de Laravel necesita un editor visual integrado para tus usuarios Control — páginas de destino, plantillas de correo electrónico, un creador de páginas white label — respaldado por tu propia base de datos y la gestión de tu propia infraestructura. Para texto enriquecido simple dentro de un campo de forma, un WYSIWYG ligero es suficiente; para composición a página completa con diseño, estilo y exportación limpia en HTML/CSS, GrapesJS es el más fuerte, Con licencia del MIT, opción autoalojada.
Consejos de producción
Unas pocas opciones hacen que un setup Laravel + GrapesJS esté listo para producción. Guarda el proyecto del editor en una json columna (o jsonb en PostgreSQL) para que haga un recorrido sin pérdidas, y mantén el renderizado html/css en columnas separadas que puedas servir directamente. Caché esa salida renderizada (caché de Laravel o CDN) y rompela en la partida, para que los visitantes no esperen al editor. Mantén activada la protección CSRF — envía el token en la X-CSRF-TOKEN cabecera en lugar de desactivar VerifyCsrfToken. Finalmente, si se puede no confiar en los editores, sanea el marcado almacenado en la salida (por ejemplo mews/purifier) en lugar de repetir HTML en bruto, ya que GrapesJS almacena fielmente lo que se ha pegado.
Próximos pasos
Añade bloques y plugins para que encajen con tu sistema de diseño. Véase el relacionado GrapesJS + React y Guías de GrapesJS + Vue , navega Plugins de adaptadores de almacenamiento y la versión completa Mercado GrapesJS, o empieza desde el GJS. Página principal del mercado.
Preguntas frecuentes
¿Cómo guardo contenido de GrapesJS en un backend de Laravel?
Configura el Gestor de Almacenamiento con type: 'remote' y apuntar
urlStore/urlLoad en las rutas de Laravel. Envía el token CSRF
en la X-CSRF-TOKEN cabecera, luego almacena el html, css y proyecto
JSON en un modelo.
¿GrapesJS necesita un paso de construcción en Laravel?
No. Cárgalo desde una CDN en una vista Blade para la configuración más sencilla, o impórtalo a través de Vite/Laravel Mix si prefieres una pipeline agrupada. El editor es un navegador simple JavaScript en cualquier caso.
¿Cómo manejo CSRF cuando GrapesJS publica en Laravel?
Añade una csrf-token meta etiqueta a tu diseño y pasa su valor como el
X-CSRF-TOKEN encabezado en el Administrador de headers Almacenamiento
Opción. El middleware web de Laravel entonces acepta la solicitud de guardado.