GrapeJS教程：如何实现自定义页面的保存与加载功能

下面提供两种实现方案，分别适用于本地存储测试和后端服务器存储的场景：

方案一：使用内置存储管理器（本地存储） #

GrapeJS 自带 storageManager 模块，可直接利用浏览器的 localStorage 实现快速存读，适合本地调试场景。

步骤1：修改编辑器初始化配置 #

启用 storageManager 并配置相关参数，同时添加保存/加载按钮面板：

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: true,
  height: '300px',
  width: 'auto',
  // 配置内置存储管理器
  storageManager: {
    type: 'localStorage', // 存储类型：localStorage
    autosave: false, // 关闭自动保存，手动触发
    storePrefix: 'gjs_', // 存储键前缀，避免冲突
    storeKey: 'my-custom-page' // 自定义存储键名
  },
  // 添加保存/加载按钮面板
  panels: { 
    defaults: [
      {
        id: 'save-load-panel',
        el: '.panel__save-load',
        buttons: [
          {
            id: 'btn-save',
            className: 'btn btn-primary',
            label: '保存页面',
            command: 'save-template'
          },
          {
            id: 'btn-load',
            className: 'btn btn-secondary',
            label: '加载页面',
            command: 'load-template'
          }
        ]
      }
    ]
  },
  // 其他原有配置保持不变
  blockManager: {},
  layerManager: {},
  deviceManager: {},
  selectorManager: {},
  styleManager: {}
});

步骤2：注册保存/加载命令 #

给按钮绑定对应的编辑器命令，触发存读操作：

// 注册保存命令
editor.Commands.add('save-template', {
  run: (editor) => {
    editor.save()
      .then(() => alert('页面保存成功！'))
      .catch(err => {
        console.error('保存失败:', err);
        alert('保存失败，请查看控制台日志');
      });
  }
});

// 注册加载命令
editor.Commands.add('load-template', {
  run: (editor) => {
    editor.load()
      .then(() => alert('页面加载成功！'))
      .catch(err => {
        console.error('加载失败:', err);
        alert('加载失败，请查看控制台日志');
      });
  }
});

方案二：自定义后端存储（生产环境） #

如果需要将页面数据持久化到自己的服务器数据库，可手动获取编辑器数据并通过接口与后端交互。

步骤1：编写保存/加载函数 #

通过 getProjectData() 获取完整页面数据（组件结构+样式），用 fetch 发送请求到后端接口：

// 保存页面到后端
async function saveToServer() {
  const pageData = editor.getProjectData();
  try {
    const res = await fetch('/api/save-page', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        data: pageData,
        pageId: 'page-001' // 自定义页面ID，用于区分不同页面
      })
    });
    const result = await res.json();
    alert(result.success ? '页面已保存到服务器！' : `保存失败：${result.message}`);
  } catch (err) {
    console.error('请求失败:', err);
    alert('保存请求失败，请检查网络连接');
  }
}

// 从后端加载页面
async function loadFromServer() {
  try {
    const res = await fetch('/api/load-page?pageId=page-001');
    const result = await res.json();
    if (result.success && result.data) {
      editor.loadProjectData(result.data);
      alert('页面已从服务器加载！');
    } else {
      alert(`加载失败：${result.message}`);
    }
  } catch (err) {
    console.error('请求失败:', err);
    alert('加载请求失败，请检查网络连接');
  }
}

步骤2：绑定按钮事件 #

给页面上的按钮绑定上述函数（需提前在HTML中添加对应按钮）：

<button id="btn-save-server" class="btn btn-primary">保存到服务器</button>
<button id="btn-load-server" class="btn btn-secondary">从服务器加载</button>

document.getElementById('btn-save-server').addEventListener('click', saveToServer);
document.getElementById('btn-load-server').addEventListener('click', loadFromServer);

注意：后端需要实现对应的 /api/save-page 和 /api/load-page 接口，负责数据的存储和读取逻辑。

内容的提问来源于stack exchange，提问作者Top Dev