GrapesJS Storage Manager: guardar en un backend (2026)

Qué hace el Gestor de Almacenamiento

El GrapesJS Storage Manager conserva los datos del proyecto del editor — los datos completos, Representación recargable de la página. La configuración de producción más sencilla es remote almacenamiento apuntando a tu backend; para control total puedes Registra un adaptador personalizado.

1. Almacenamiento remoto

const editor = grapesjs.init({
  container: '#gjs',
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 3,        // save after 3 changes
    options: {
      remote: {
        urlStore: '/api/page',  // POST project JSON here
        urlLoad: '/api/page',   // GET project JSON here
        headers: { 'Authorization': 'Bearer ' + token },
      },
    },
  },
});

GrapesJS POSTEA el proyecto y urlStore lo carga desde urlLoad. Añade cabeceras CSRF del framework aquí cuando sea necesario.

2. Guardar manualmente en lugar de guardar automáticamente

// storageManager: { type: 'remote', autosave: false, ... }
document.getElementById('save').onclick = () => editor.store();

3. Un adaptador de almacenamiento totalmente personalizado

editor.Storage.add('my-store', {
  async load() {
    const res = await fetch('/api/page');
    return res.ok ? res.json() : {};
  },
  async store(data) {
    await fetch('/api/page', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  },
});

// then:
grapesjs.init({
  container: '#gjs',
  storageManager: { type: 'my-store' },
});

Consejos de producción

Afina guardar para uso real. stepsBeforeSave controla lo hablador que es el guardado automático — si es demasiado bajo, golpeas la API en cada cambio tipo pulsación; un valor de 3–5 suele ser correcto, o cambias a un botón de guardado manual. Envía tu autenticación (token portador o CSRF) en la headers opción para que la ruta de la tienda permanezca protegida. Si varias personas pueden editar la misma página, añadir una versión o updated_at comprobar en el servidor y rechazar escrituras obsoletas en lugar de sobrescribir silenciosamente. Y maneja la ruta de fallo: muestra un error visible (y conserva el proyecto en memoria) cuando falla una solicitud de guardado, para que no se pierda trabajo.

Requisitos previos

Necesitas un editor GrapesJS en funcionamiento y un endpoint backend (cualquier lenguaje). El Almacén Manager mantiene los datos del proyecto del editor — los completos, recargables Representación de la página — para que puedas reabrir exactamente lo que se guardó.

Manejar varias páginas

La mayoría de las apps almacenan más de una página. Pasa un id a tus endpoints y clave el registro por eso, ya sea mediante la URL o un encabezado personalizado:

storageManager: {
  type: 'remote',
  options: { remote: {
    urlStore: `/api/pages/${pageId}`,
    urlLoad: `/api/pages/${pageId}`,
    headers: { Authorization: `Bearer ${token}` },
  }},
}

Adaptador personalizado con gestión de errores

editor.Storage.add('api', {
  async load() {
    const res = await fetch(`/api/pages/${pageId}`);
    if (!res.ok) throw new Error('load failed');
    return res.json();
  },
  async store(data) {
    const res = await fetch(`/api/pages/${pageId}`, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    if (!res.ok) throw new Error('save failed');
  },
});

Guardado automático de sintonización y fallos en superficies

stepsBeforeSave Controla lo hablador que es el guardado automático — 3–5 suele ser correcto, o Usa un botón de guardado manual (autosave: false + editor.store()). Escucha errores de almacenamiento y muestra al usuario un mensaje visible mientras mantienes el Proyecto en memoria, así que una petición fallida nunca pierde trabajo.

Concurrencia y mejores prácticas

Si varias personas pueden editar la misma página, añadir una versión o updated_at Revisa el servidor y rechaza las escrituras obsoletas en lugar de sobrescribir en silencio. Siempre Autentica la ruta de la tienda. Guarda el proyecto completo más las páginas en html/css renderizadas Sirve rápido y aún así vuelve a abrir en el editor.

Próximos pasos

Consulta cableado específico del backend en el Laravel, Django, y Guías Express/Node , navega plugins de adaptadores de almacenamiento, o empezar desde el GJS. Página principal del mercado.

Preguntas frecuentes

¿Cómo guarda el Gestor de Almacenamiento en un backend?

Conjunto type: 'remote' con options.remote.urlStore y urlLoad; GrapesJS POSTs/GETs del proyecto JSON, opcionalmente con autenticación cabeceras.

¿Cómo controlo el guardado automático?

Úsase autosave: true con stepsBeforeSave, o conjunto autosave: false Y llámate editor.store() tú mismo.

¿Puedo escribir un adaptador personalizado?

Sí — editor.Storage.add('name', { load, store }) y se estableció storageManager.type a ese nombre.