GrapesJS 存储管理器：保存到后端（2026）

存储管理器的作用

GrapesJS 存储管理器会持久化编辑器的项目数据——完整的， 页面的可加载表示。最简单的生产设置是 remote 存储指向你的后端;为了完全控制，你可以 注册一个自定义适配器。

1. 远程存储

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 将项目 POSTs 到 urlStore 并加载于 urlLoad。需要时在这里添加框架CSRF首部。

2. 手动保存而不是自动保存

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

3. 一个完全定制的存储适配器

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' },
});

制作技巧

校内保存以备实际使用。 stepsBeforeSave 控制自动保存的多么多话——太低你会对每一次按键变化都用 API 狂灌;通常 3–5 是正确的，或者切换到手动保存按钮。在选项里发送你的授权（持有令牌或CSRF）， headers 这样存储路由会受到保护。如果多人能编辑同一个页面，添加版本或 updated_at 在服务器上检查，拒绝陈旧写入，而不是默默覆盖。并处理失败路径：当存档请求失败时，显示可见错误（并保留内存中的项目），这样工作就不会丢失。

前提条件

你需要一个运行中的GrapesJS编辑器和一个后端端点（任何语言）。储藏室 管理器持久化编辑器的 项目数据 ——完整且可重新加载的 页面的表示——这样你可以重新打开保存的具体内容。

处理多页

大多数应用会存储多个页面。把一个ID传递给你的端点，并用以下方式来标记记录 通过URL或自定义头部：

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

带有错误处理功能的定制适配器

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');
  },
});

调校自动保存和表面故障

stepsBeforeSave 控制自动保存的多闲——通常3到5个是正确的，或者 请使用手动保存按钮（autosave: false + editor.store()）。 监听存储错误，并向用户展示可见信息，同时保持 内存项目，因此失败的请求永远不会失去工作。

并发与最佳实践

如果多人可以编辑同一页面，可以添加一个版本或 updated_at 检查服务器，拒绝陈旧写入，而不是默默覆盖。总是这样 验证店铺路线。存储完整项目以及渲染的 html/css 页面 快速发达，同时在编辑器中重新打开。

下一步

参见后端专用布线 拉拉维尔， Django，以及 快速/节点 指南，浏览一下 存储 适配器插件，或者从 GJS。市场主页。

常见问题

存储管理器是如何保存到后端的？

集合 type: 'remote' 为 options.remote.urlStore 和 urlLoad;GrapesJS POSTs/GETs（项目 JSON）可选择性地带认证 页眉。

我如何控制自动保存？

使用 autosave: true ，或与 stepsBeforeSave集合 autosave: false 然后叫 editor.store() 你自己。

我可以写一个自定义适配器吗？

是的—— editor.Storage.add('name', { load, store }) 而且已经开始了 storageManager.type 那个名字。