Javascript GrapeJS 如何保存和加载自定义页面

发布于04月11日

我创建了一个简单的页面构建器，遵循GrapeJS，它运行良好. 我认为需要有两个函数来保存和加载生成的页面. 我该怎么办？

const editor = grapesjs.init({
  // Indicate where to init the editor. You can also pass an HTMLElement
  container: '#gjs',
  // Get the content for the canvas directly from the element
  // As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,
  fromElement: true,
  // Size of the editor
  height: '300px',
  width: 'auto',
  // Disable the storage manager for the moment
  storageManager: false,
  // Avoid any default panel
  panels: { defaults: [] },
  blockManager: { },
  layerManager: { },
  deviceManager: { },
  selectorManager: { },
  styleManager: { },
  storageManager: { }
});

推荐答案

保存模板的当前阶段

         let components = editor.getComponents();
         let style = editor.getStyle()
         let templateData = {
             components: components,
             style: style
         };
         localStorage.setItem("template", JSON.stringify(templateData));

加载保存的数据

         let templateData = JSON.parse(localStorage.getItem("template"));
         editor.setComponents(templateData.components);
         editor.setStyle(templateData.style);

您可以保存在数据库中，而不是localStorage.这对我有效！