Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – GrapeJS – How to save and load customized page

I created a simple page builder by following GrapeJS Docs and it is working well.
I think there need to be 2 functions to save and load the generated page.
How can I do this?

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: { }
});
Tags:

2

Answers


  1. 0

    1.If you need to load/get project source data after the initialization, Grapes js provide two functions for that.

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

    2.Grapes js also provides 3 functions to get HTML,CSS & JS

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

    3.You can also define the storage manager like below and call editor.store() to save & editor.load() to load project data from the provided endpoints.

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

    For more details about the storage manager check the official docs setup remote storage

    Login or Signup to reply.
  2. 0

    1. Save current stage of template

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

    2. Load saved data

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

    You can save in database instead of localStorage. This worked for me!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search