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

Question

我按照 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: { }
});

Answer 1

1.如果初始化后需要加载/获取项目源数据，Grapes js 提供了两个函数。

editor.getProjectData(); // return project data
editor.loadProjectData(jsonProjectData); // load project data

2.Grapes js还提供了3个函数来获取HTML,CSS & JS

editor.getHtml();
editor.getCss();
editor.getJs();

3.您还可以像下面这样定义存储管理器，并调用

editor.store()

保存并调用

editor.load()

从提供的端点加载项目数据。

const editor = grapesjs.init({
  ...
  storageManager: {
    type: 'remote',
    stepsBeforeSave: 3,
    options: {
      remote: {
        urlLoad: `http://localhost:3000/projects/${projectID}`, // GET request to load the data
        urlStore: `http://localhost:3000/projects/${projectID}`, // POST request to save the data
        // The `remote` storage uses the POST method when stores data but
        // the json-server API requires PATCH.
        fetchOptions: opts => (opts.method === 'POST' ?  { method: 'PATCH' } : {}),
        // As the API stores projects in this format `{id: 1, data: projectData }`,
        // we have to properly update the body before the store and extract the
        // project data from the response result.
                onStore: (projectData, editor) => {
                    return {
                        gjs_html: editor.getHtml(),
                        gjs_css: editor.getCss(),
                        gjs_js: editor.getJs(),
                        gjs_source: projectData,
                    };
                },
        onLoad: result => result.data,
      }
    }
  }
});

有关存储管理器的更多详细信息，请查看官方文档设置远程存储