diff --git a/docs/modules/Storage.md b/docs/modules/Storage.md index c6db2e197..40d948707 100644 --- a/docs/modules/Storage.md +++ b/docs/modules/Storage.md @@ -303,21 +303,22 @@ editor.Storage.add('remote', { -### Examples + + ## Common use cases -### Init without first load +### Skip initial load -In case you're using a `remote` storage, you might probably want to skip the initial remote call by loading the project instantly. In that case, you can specify the `projectData` on initialization. +In case you're using the `remote` storage, you might probably want to skip the initial remote call by loading the project instantly. In that case, you can specify the `projectData` on initialization. ```js // Get the data before initializing the editor (eg. printed on server-side). @@ -348,28 +349,25 @@ In case `projectData` is defined, the initial storage load will be automatically ### HTML code with project data The project data doesn't contain HTML/CSS of your pages as its main purpose is to collect only the strictly necessary information. -In case you have a strict requirement to execute also other logic connected to the store of your project data (eg. deploy HTML/CSS result to the stage environment) you can enrich your remote calls by using the `onStore` option in your remote storage. +In case you have a strict requirement to execute also other logic connected to the store of your project data (eg. deploy HTML/CSS result to the stage environment) you can enrich your remote calls by using the `onStore` option in the remote configuration. ```js -const getPagesHtml = async (editor) => { - const pages = editor.Pages.getAll(); - return await Promise.all(pages.map(async (page) => { - return { - id: page.getId(), - html: await editor.getCode('html', { component: page.getMainComponent() }), - }; - })); -}; - grapesjs.init({ // ... storageManager: { type: 'remote', - // Enrich the store call options: { remote: { + // Enrich the store call onStore: (data, editor) => { - return { id: projectID, data }; + const pagesHtml = editor.Pages.getAll().map(page => { + const component = page.getMainComponent(); + return { + html: editor.getHtml({ component }), + css: editor.getCss({ component }) + } + }); + return { id: projectID, data, pagesHtml }; }, } }, @@ -379,6 +377,60 @@ grapesjs.init({ ### Inline project data +In might be a case where the editor is not connected to any storage but simply read/write the data in inputs placed in a form. For such a case you can create an inline storage. + +```html +
+ + +
+ +
+ + +``` + +In the example above we're relying on two hidden inputs, one for containing the project data and the another one for the HTML/CSS. + +