mirror of https://github.com/artf/grapesjs.git
nocodeframeworkdrag-and-dropsite-buildersite-generatortemplate-builderui-builderweb-builderweb-builder-frameworkwebsite-builderno-codepage-builder
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
265 lines
72 KiB
265 lines
72 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Storage Manager | GrapesJS</title>
|
|
<meta name="generator" content="VuePress 1.9.10">
|
|
<link rel="icon" href="/docs/logo-icon.png">
|
|
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.21.10">
|
|
<script src="https://grapesjs.com/js/grapes.min.js?v0.21.10"></script>
|
|
<meta name="description" content="GrapesJS documentation">
|
|
|
|
<link rel="preload" href="/docs/assets/css/0.styles.c7ff573f.css" as="style"><link rel="preload" href="/docs/assets/js/app.7cba500a.js" as="script"><link rel="preload" href="/docs/assets/js/4.0070552e.js" as="script"><link rel="preload" href="/docs/assets/js/2.6fefd022.js" as="script"><link rel="preload" href="/docs/assets/js/1.d23e9fed.js" as="script"><link rel="preload" href="/docs/assets/js/92.d3e7c08c.js" as="script"><link rel="prefetch" href="/docs/assets/js/12.fcd6c1b3.js"><link rel="prefetch" href="/docs/assets/js/13.f8ba6288.js"><link rel="prefetch" href="/docs/assets/js/14.37d1e434.js"><link rel="prefetch" href="/docs/assets/js/15.6e77df13.js"><link rel="prefetch" href="/docs/assets/js/16.c5f433ca.js"><link rel="prefetch" href="/docs/assets/js/17.de56d7c2.js"><link rel="prefetch" href="/docs/assets/js/18.bf39ac98.js"><link rel="prefetch" href="/docs/assets/js/19.ca87c57f.js"><link rel="prefetch" href="/docs/assets/js/20.68039d84.js"><link rel="prefetch" href="/docs/assets/js/21.2b429912.js"><link rel="prefetch" href="/docs/assets/js/22.27b0a8c5.js"><link rel="prefetch" href="/docs/assets/js/23.a6d68e8d.js"><link rel="prefetch" href="/docs/assets/js/24.74960541.js"><link rel="prefetch" href="/docs/assets/js/25.ca71342f.js"><link rel="prefetch" href="/docs/assets/js/26.33a13a48.js"><link rel="prefetch" href="/docs/assets/js/27.54f6b393.js"><link rel="prefetch" href="/docs/assets/js/28.cf1f128d.js"><link rel="prefetch" href="/docs/assets/js/29.5888c207.js"><link rel="prefetch" href="/docs/assets/js/3.4e94790f.js"><link rel="prefetch" href="/docs/assets/js/30.bace5f23.js"><link rel="prefetch" href="/docs/assets/js/31.2b0fa15d.js"><link rel="prefetch" href="/docs/assets/js/32.fdf463ac.js"><link rel="prefetch" href="/docs/assets/js/33.a739af41.js"><link rel="prefetch" href="/docs/assets/js/34.27801365.js"><link rel="prefetch" href="/docs/assets/js/35.55be1c25.js"><link rel="prefetch" href="/docs/assets/js/36.78a4b7a9.js"><link rel="prefetch" href="/docs/assets/js/37.a1d1286c.js"><link rel="prefetch" href="/docs/assets/js/38.7f94984b.js"><link rel="prefetch" href="/docs/assets/js/39.bae8130f.js"><link rel="prefetch" href="/docs/assets/js/40.d641c435.js"><link rel="prefetch" href="/docs/assets/js/41.2f0da2d4.js"><link rel="prefetch" href="/docs/assets/js/42.a0743242.js"><link rel="prefetch" href="/docs/assets/js/43.8460a28b.js"><link rel="prefetch" href="/docs/assets/js/44.943c0253.js"><link rel="prefetch" href="/docs/assets/js/45.aafa45da.js"><link rel="prefetch" href="/docs/assets/js/46.ad246b82.js"><link rel="prefetch" href="/docs/assets/js/47.b412adfe.js"><link rel="prefetch" href="/docs/assets/js/48.af9cac86.js"><link rel="prefetch" href="/docs/assets/js/49.86ad40ac.js"><link rel="prefetch" href="/docs/assets/js/5.08dc74a9.js"><link rel="prefetch" href="/docs/assets/js/50.f7509701.js"><link rel="prefetch" href="/docs/assets/js/51.8c42f1c6.js"><link rel="prefetch" href="/docs/assets/js/52.82b56909.js"><link rel="prefetch" href="/docs/assets/js/53.5f6601a1.js"><link rel="prefetch" href="/docs/assets/js/54.e8a69f95.js"><link rel="prefetch" href="/docs/assets/js/55.22891dc5.js"><link rel="prefetch" href="/docs/assets/js/56.f7e9921e.js"><link rel="prefetch" href="/docs/assets/js/57.578f14f1.js"><link rel="prefetch" href="/docs/assets/js/58.64b9e09c.js"><link rel="prefetch" href="/docs/assets/js/59.135e8739.js"><link rel="prefetch" href="/docs/assets/js/6.3a6e1ed3.js"><link rel="prefetch" href="/docs/assets/js/60.c21dfd9f.js"><link rel="prefetch" href="/docs/assets/js/61.c49c5b1e.js"><link rel="prefetch" href="/docs/assets/js/62.ce5bed3d.js"><link rel="prefetch" href="/docs/assets/js/63.3ee6f39c.js"><link rel="prefetch" href="/docs/assets/js/64.b439d27f.js"><link rel="prefetch" href="/docs/assets/js/65.ee472a88.js"><link rel="prefetch" href="/docs/assets/js/66.becd0d7a.js"><link rel="prefetch" href="/docs/assets/js/67.166cf34e.js"><link rel="prefetch" href="/docs/assets/js/68.36615226.js"><link rel="prefetch" href="/docs/assets/js/69.9a5913c7.js"><link rel="prefetch" href="/docs/assets/js/7.b99a3113.js"><link rel="prefetch" href="/docs/assets/js/70.8663a867.js"><link rel="prefetch" href="/docs/assets/js/71.8b580dcf.js"><link rel="prefetch" href="/docs/assets/js/72.355b7953.js"><link rel="prefetch" href="/docs/assets/js/73.b9ad99cd.js"><link rel="prefetch" href="/docs/assets/js/74.517d9902.js"><link rel="prefetch" href="/docs/assets/js/75.183f30c2.js"><link rel="prefetch" href="/docs/assets/js/76.894100bc.js"><link rel="prefetch" href="/docs/assets/js/77.a896626f.js"><link rel="prefetch" href="/docs/assets/js/78.a8d38215.js"><link rel="prefetch" href="/docs/assets/js/79.d0ad637c.js"><link rel="prefetch" href="/docs/assets/js/8.c0e09a5e.js"><link rel="prefetch" href="/docs/assets/js/80.43bf5b47.js"><link rel="prefetch" href="/docs/assets/js/81.a3f44150.js"><link rel="prefetch" href="/docs/assets/js/82.514bee1c.js"><link rel="prefetch" href="/docs/assets/js/83.288e8f5d.js"><link rel="prefetch" href="/docs/assets/js/84.76c28d97.js"><link rel="prefetch" href="/docs/assets/js/85.c70a27f1.js"><link rel="prefetch" href="/docs/assets/js/86.d1d289b7.js"><link rel="prefetch" href="/docs/assets/js/87.bced23ab.js"><link rel="prefetch" href="/docs/assets/js/88.f0049b73.js"><link rel="prefetch" href="/docs/assets/js/89.c2ba01c2.js"><link rel="prefetch" href="/docs/assets/js/9.6121e0b4.js"><link rel="prefetch" href="/docs/assets/js/90.529090e5.js"><link rel="prefetch" href="/docs/assets/js/91.dd59134d.js"><link rel="prefetch" href="/docs/assets/js/93.a12b0826.js"><link rel="prefetch" href="/docs/assets/js/94.036e5ed0.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.0da9b1d4.js">
|
|
<link rel="stylesheet" href="/docs/assets/css/0.styles.c7ff573f.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" alt="GrapesJS" class="logo"> <span class="site-name can-hide">GrapesJS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="native-carbon" class="carbon-ads"></div> <ul class="sidebar-links"><li><a href="/docs/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Modules</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/modules/Components.html" class="sidebar-link">Components</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components & JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Traits</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Assets.html" class="sidebar-link">Assets</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/modules/I18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/modules/Selectors.html" class="sidebar-link">Selectors</a></li><li><a href="/docs/modules/Layers.html" class="sidebar-link">Layers</a></li><li><a href="/docs/modules/Pages.html" class="sidebar-link">Pages</a></li><li><a href="/docs/modules/Style-manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/modules/Storage.html" aria-current="page" class="active sidebar-link">Storage Manager</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#project-data" class="sidebar-link">Project data</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#storage-strategy" class="sidebar-link">Storage strategy</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#setup-local-storage" class="sidebar-link">Setup local storage</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#setup-remote-storage" class="sidebar-link">Setup remote storage</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#storage-api" class="sidebar-link">Storage API</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#common-use-cases" class="sidebar-link">Common use cases</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/modules/Modal.html" class="sidebar-link">Modal</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Guides</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="storage-manager"><a href="#storage-manager" class="header-anchor">#</a> Storage Manager</h1> <p>The Storage Manager is a built-in module that allows the persistence of your project data.</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This guide requires GrapesJS v0.19.* or higher</p></div> <p></p><div class="table-of-contents"><ul><li><a href="#configuration">Configuration</a></li><li><a href="#project-data">Project data</a></li><li><a href="#storage-strategy">Storage strategy</a></li><li><a href="#setup-local-storage">Setup local storage</a></li><li><a href="#setup-remote-storage">Setup remote storage</a><ul><li><a href="#server-setup">Server setup</a></li></ul></li><li><a href="#storage-api">Storage API</a><ul><li><a href="#define-new-storage">Define new storage</a></li><li><a href="#extend-storage">Extend storage</a></li><li><a href="#replace-storage">Replace storage</a></li></ul></li><li><a href="#common-use-cases">Common use cases</a><ul><li><a href="#skip-initial-load">Skip initial load</a></li><li><a href="#html-code-with-project-data">HTML code with project data</a></li><li><a href="#inline-project-data">Inline project data</a></li></ul></li><li><a href="#events">Events</a></li></ul></div><p></p> <h2 id="configuration"><a href="#configuration" class="header-anchor">#</a> Configuration</h2> <p>To change the default configurations you have to pass the <code>storageManager</code> property with the main configuration object.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token comment">// Default configurations</span>
|
|
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'local'</span><span class="token punctuation">,</span> <span class="token comment">// Storage type. Available: local | remote</span>
|
|
<span class="token literal-property property">autosave</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Store data automatically</span>
|
|
<span class="token literal-property property">autoload</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Autoload stored data on init</span>
|
|
<span class="token literal-property property">stepsBeforeSave</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// If autosave is enabled, indicates how many changes are necessary before the store method is triggered</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token comment">// Default storage options</span>
|
|
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">local</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">/* ... */</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">remote</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token comment">/* ... */</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>In case you don't need any persistence, you can disable the module in this way:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Check the full list of available options here: <a href="https://github.com/GrapesJS/grapesjs/blob/master/src/storage_manager/config/config.ts" target="_blank" rel="noopener noreferrer">Storage Manager Config<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h2 id="project-data"><a href="#project-data" class="header-anchor">#</a> Project data</h2> <p>The project data is a JSON object containing all the necessary information (styles, pages, etc.) about your project in the editor and is the one used in the storage manager methods in order to store and load your project (locally or remotely in your DB/file).</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>You can get the current state of the data and load it manually in this way:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Get current project data</span>
|
|
<span class="token keyword">const</span> projectData <span class="token operator">=</span> editor<span class="token punctuation">.</span><span class="token function">getProjectData</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token comment">// Load project data</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">loadProjectData</span><span class="token punctuation">(</span>projectData<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div></div> <div class="custom-block danger"><p class="custom-block-title">DANGER</p> <p>You should only rely on the JSON project data in order to load your project properly in the editor.</p> <p>The editor is able to parse and use HTML/CSS code, you can use it as part of your project initialization but never rely on it as a persitance layer in the load of projects as many information could be stripped off.</p></div> <h2 id="storage-strategy"><a href="#storage-strategy" class="header-anchor">#</a> Storage strategy</h2> <p>Project data are automatically stored every time the amount of changes (<code>editor.getDirtyCount()</code>) reaches the number of steps before save (<code>editor.Storage.getStepsBeforeSave()</code>). On any successful store of the data, the counter of changes is reset (<code>editor.clearDirtyCount()</code>).</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>When necessary, you can always trigger store/load manually.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Store data</span>
|
|
<span class="token keyword">const</span> storedProjectData <span class="token operator">=</span> <span class="token keyword">await</span> editor<span class="token punctuation">.</span><span class="token function">store</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Load data</span>
|
|
<span class="token keyword">const</span> loadedProjectData <span class="token operator">=</span> <span class="token keyword">await</span> editor<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div></div> <h2 id="setup-local-storage"><a href="#setup-local-storage" class="header-anchor">#</a> Setup local storage</h2> <p>By default, GrapesJS saves the data locally by using the built-in <code>local</code> storage which leverages <a href="https://developer.mozilla.org/it/docs/Web/API/Window/localStorage" target="_blank" rel="noopener noreferrer">localStorage API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p>The only option you might probably care for the local storage is the <code>key</code> used to store the data. If the user loads different projects in your application, you might probably need to differentiate the local storage by the ID of the project (the ID here is intended to be part of your application domain).</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Get your project ID (eg. taken from the route)</span>
|
|
<span class="token keyword">const</span> projectId <span class="token operator">=</span> <span class="token function">getProjectId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'local'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">local</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">gjsProject-</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>projectId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="setup-remote-storage"><a href="#setup-remote-storage" class="header-anchor">#</a> Setup remote storage</h2> <p>Most commonly the data of the project might be saved remotely on your server (DB, file, etc.) therefore you need to setup your server-side API calls in order to store/load project data.</p> <p>For a sake of simplicity we can setup a fake REST API server by relying on <a href="https://github.com/typicode/json-server" target="_blank" rel="noopener noreferrer">json-server<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">mkdir</span> my-server
|
|
<span class="token builtin class-name">cd</span> my-server
|
|
<span class="token function">npm</span> init
|
|
<span class="token function">npm</span> i json-server
|
|
<span class="token builtin class-name">echo</span> <span class="token string">'{"projects": [ {"id": 1, "data": {"assets": [], "styles": [], "pages": [{"component": "<div>Initial content</div>"}]} } ]}'</span> <span class="token operator">></span> db.json
|
|
npx json-server <span class="token parameter variable">--watch</span> db.json
|
|
</code></pre></div><p>This will start up a local server with one single project available on <code>http://localhost:3000/projects/1</code>. The data will be updated on the <code>db.json</code> file.</p> <p>Here below an example of how you would configure a <code>remote</code> storage in GrapesJS.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> projectID <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> projectEndpoint <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">http://localhost:3000/projects/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>projectID<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">stepsBeforeSave</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">remote</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">urlLoad</span><span class="token operator">:</span> projectEndpoint<span class="token punctuation">,</span>
|
|
<span class="token literal-property property">urlStore</span><span class="token operator">:</span> projectEndpoint<span class="token punctuation">,</span>
|
|
<span class="token comment">// The `remote` storage uses the POST method when stores data but</span>
|
|
<span class="token comment">// the json-server API requires PATCH.</span>
|
|
<span class="token function-variable function">fetchOptions</span><span class="token operator">:</span> <span class="token parameter">opts</span> <span class="token operator">=></span> <span class="token punctuation">(</span>opts<span class="token punctuation">.</span>method <span class="token operator">===</span> <span class="token string">'POST'</span> <span class="token operator">?</span> <span class="token punctuation">{</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'PATCH'</span> <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// As the API stores projects in this format `{id: 1, data: projectData }`,</span>
|
|
<span class="token comment">// we have to properly update the body before the store and extract the</span>
|
|
<span class="token comment">// project data from the response result.</span>
|
|
<span class="token function-variable function">onStore</span><span class="token operator">:</span> <span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> projectID<span class="token punctuation">,</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token function-variable function">onLoad</span><span class="token operator">:</span> <span class="token parameter">result</span> <span class="token operator">=></span> result<span class="token punctuation">.</span>data<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="custom-block danger"><p class="custom-block-title">DANGER</p> <p>Be sure to configure properly <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank" rel="noopener noreferrer">CORS<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> on your server API. The <a href="https://github.com/typicode/json-server" target="_blank" rel="noopener noreferrer">json-server<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> is not intended to be used in production and therefore enables all of them automatically.</p></div> <div id="setup-the-server"></div> <h3 id="server-setup"><a href="#server-setup" class="header-anchor">#</a> Server setup</h3> <p>Server configuration might differ case to case so usually, it's up to you to know how to configure it properly.
|
|
The default remote storage follows a simple REST API approach with project data exchanged as a JSON (<code>Content-Type: application/json</code>).</p> <ul><li>On <strong>load</strong> (<code>GET</code> method), the JSON project data are expected to be returned directly in the response. As from example above, you can use <code>options.remote.onLoad</code> to extract the project data if the response contains other metadata.</li> <li>On <strong>store</strong> (<code>POST</code> method), the editor doesn't expect any particular result but only a valid response from the server (status code <code>200</code>).</li></ul> <h2 id="storage-api"><a href="#storage-api" class="header-anchor">#</a> Storage API</h2> <p>The Storage Manager module has also its own <a href="/docs/api/storage_manager.html">set of APIs</a> that allows you to extend and add new functionalities.</p> <h3 id="define-new-storage"><a href="#define-new-storage" class="header-anchor">#</a> Define new storage</h3> <p>Defining a new storage is a matter of passing of two asyncronous methods to the <code>editor.Storage.add</code> API. For a sake of simplicity, the example below illustrates the API usage for defining the <code>session</code> storage by using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage" target="_blank" rel="noopener noreferrer">sessionStorage API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">sessionStoragePlugin</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">editor</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// As sessionStorage is not an asynchronous API,</span>
|
|
<span class="token comment">// the `async` keyword could be skipped</span>
|
|
editor<span class="token punctuation">.</span>Storage<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'session'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">async</span> <span class="token function">load</span><span class="token punctuation">(</span><span class="token parameter">options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>sessionStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span>key<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token keyword">async</span> <span class="token function">store</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> options <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
sessionStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span>options<span class="token punctuation">.</span>key<span class="token punctuation">,</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>sessionStoragePlugin<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'session'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">session</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'myKey'</span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="extend-storage"><a href="#extend-storage" class="header-anchor">#</a> Extend storage</h3> <p>Among other needs, you might need to use existing storages to combine them in a more complex use case.
|
|
For example, let's say we would like to mix the local and remote storages inside another one. This is how it would look like:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> Storage <span class="token punctuation">}</span> <span class="token operator">=</span> editor<span class="token punctuation">;</span>
|
|
|
|
Storage<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'remote-local'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">async</span> <span class="token function">store</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> remoteStorage <span class="token operator">=</span> Storage<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'remote'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">try</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">await</span> remoteStorage<span class="token punctuation">.</span><span class="token function">store</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> Storage<span class="token punctuation">.</span><span class="token function">getStorageOptions</span><span class="token punctuation">(</span><span class="token string">'remote'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// On remote error, store data locally</span>
|
|
<span class="token keyword">const</span> localStorage <span class="token operator">=</span> Storage<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'local'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">await</span> localStorage<span class="token punctuation">.</span><span class="token function">store</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> Storage<span class="token punctuation">.</span><span class="token function">getStorageOptions</span><span class="token punctuation">(</span><span class="token string">'local'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token keyword">async</span> <span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="replace-storage"><a href="#replace-storage" class="header-anchor">#</a> Replace storage</h3> <p>You can also replace already defined storages with other implementations by passing the same storage type in the <code>Storage.add</code> method. You can switch, for example, the default <code>local</code>, which relies on <a href="https://developer.mozilla.org/it/docs/Web/API/Window/localStorage" target="_blank" rel="noopener noreferrer">localStorage API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, with something more scalable like <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API" target="_blank" rel="noopener noreferrer">IndexedDB API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>.</p> <p>It might also be possible that you're already using some HTTP client library (eg. <a href="https://github.com/axios/axios" target="_blank" rel="noopener noreferrer">axios<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>) which handles for you all the necessary HTTP headers in your application (CSRF token, session data, etc.), so you can simply replace the default <code>remote</code> storage with your implementation of choice without caring about the default configurations.</p> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>Storage<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'remote'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">async</span> <span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">projects/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>projectId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token keyword">async</span> <span class="token function">store</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">patch</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">projects/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>projectId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div> <h2 id="common-use-cases"><a href="#common-use-cases" class="header-anchor">#</a> Common use cases</h2> <h3 id="skip-initial-load"><a href="#skip-initial-load" class="header-anchor">#</a> Skip initial load</h3> <p>In case you're using the <code>remote</code> storage, you might probably want to skip the initial remote call by loading the project instantly. In that case, you can specify the <code>projectData</code> on initialization.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Get the data before initializing the editor (eg. printed on server-side).</span>
|
|
<span class="token keyword">const</span> projectData <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// ...</span>
|
|
grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token comment">// If projectData is not defined we might want to load some initial data for the project.</span>
|
|
<span class="token literal-property property">projectData</span><span class="token operator">:</span> projectData <span class="token operator">||</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">pages</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">component</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
|
<div class="test">Initial content</div>
|
|
<style>.test { color: red }</style>
|
|
</span><span class="token template-punctuation string">`</span></span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
</code></pre></div><p>In case <code>projectData</code> is defined, the initial storage load will be automatically skipped.</p> <h3 id="html-code-with-project-data"><a href="#html-code-with-project-data" class="header-anchor">#</a> HTML code with project data</h3> <p>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 <code>onStore</code> option in the remote configuration.</p> <div class="language-js extra-class"><pre class="language-js"><code>grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">remote</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Enrich the store call</span>
|
|
<span class="token function-variable function">onStore</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> editor</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> pagesHtml <span class="token operator">=</span> editor<span class="token punctuation">.</span>Pages<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">page</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> component <span class="token operator">=</span> page<span class="token punctuation">.</span><span class="token function">getMainComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">html</span><span class="token operator">:</span> editor<span class="token punctuation">.</span><span class="token function">getHtml</span><span class="token punctuation">(</span><span class="token punctuation">{</span> component <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">css</span><span class="token operator">:</span> editor<span class="token punctuation">.</span><span class="token function">getCss</span><span class="token punctuation">(</span><span class="token punctuation">{</span> component <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> projectID<span class="token punctuation">,</span> data<span class="token punctuation">,</span> pagesHtml <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// If on load, you're returning the same JSON from above...</span>
|
|
<span class="token function-variable function">onLoad</span><span class="token operator">:</span> <span class="token parameter">result</span> <span class="token operator">=></span> result<span class="token punctuation">.</span>data<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
</code></pre></div><h3 id="inline-project-data"><a href="#inline-project-data" class="header-anchor">#</a> Inline project data</h3> <p>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.</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-form<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>project-html<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>project-data<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{"pages": [{"component": "<div>Initial content</div>"}]}<span class="token punctuation">'</span></span><span class="token punctuation">/></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gjs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
|
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
|
<span class="token comment">// Show data on submit</span>
|
|
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'my-form'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'submit'</span><span class="token punctuation">,</span> <span class="token parameter">event</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> projectDataEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'project-data'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> projectHtmlEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'project-html'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">HTML: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>projectHtmlEl<span class="token punctuation">.</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\n------\nDATA: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>projectDataEl<span class="token punctuation">.</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Inline storage</span>
|
|
<span class="token keyword">const</span> <span class="token function-variable function">inlineStorage</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">editor</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> projectDataEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'project-data'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> projectHtmlEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'project-html'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
editor<span class="token punctuation">.</span>Storage<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'inline'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>projectDataEl<span class="token punctuation">.</span>value <span class="token operator">||</span> <span class="token string">'{}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token function">store</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> component <span class="token operator">=</span> editor<span class="token punctuation">.</span>Pages<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getMainComponent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
projectDataEl<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
projectHtmlEl<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><html>
|
|
<head>
|
|
<style></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>editor<span class="token punctuation">.</span><span class="token function">getCss</span><span class="token punctuation">(</span><span class="token punctuation">{</span> component <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></style>
|
|
</head>
|
|
</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>editor<span class="token punctuation">.</span><span class="token function">getHtml</span><span class="token punctuation">(</span><span class="token punctuation">{</span> component <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
|
|
<html></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Init editor</span>
|
|
grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token string">'#gjs'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'500px'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span>inlineStorage<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">storageManager</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'inline'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
|
</code></pre></div><p>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.</p> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>For a complete list of available events, you can check it <a href="/docs/api/storage_manager.html#available-events">here</a>.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/Storage.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">3/11/2023, 3:47:09 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/docs/modules/Style-manager.html" class="prev">
|
|
Style Manager
|
|
</a></span> <span class="next"><a href="/docs/modules/Modal.html">
|
|
Modal
|
|
</a>
|
|
→
|
|
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|
<script src="/docs/assets/js/app.7cba500a.js" defer></script><script src="/docs/assets/js/4.0070552e.js" defer></script><script src="/docs/assets/js/2.6fefd022.js" defer></script><script src="/docs/assets/js/1.d23e9fed.js" defer></script><script src="/docs/assets/js/92.d3e7c08c.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|