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.
208 lines
55 KiB
208 lines
55 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.8.2">
|
|
<link rel="icon" href="/docs/logo-icon.png">
|
|
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.18.1">
|
|
<script src="../js/grapes.min.js?v0.18.1"></script>
|
|
<meta name="description" content="GrapesJS documentation">
|
|
|
|
<link rel="preload" href="/docs/assets/css/0.styles.3b77bb8f.css" as="style"><link rel="preload" href="/docs/assets/js/app.f6ceb853.js" as="script"><link rel="preload" href="/docs/assets/js/11.c4867228.js" as="script"><link rel="preload" href="/docs/assets/js/2.15028157.js" as="script"><link rel="preload" href="/docs/assets/js/70.f312d5fd.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.0eaadd95.js"><link rel="prefetch" href="/docs/assets/js/12.4f724132.js"><link rel="prefetch" href="/docs/assets/js/13.8130e741.js"><link rel="prefetch" href="/docs/assets/js/14.805bfcc5.js"><link rel="prefetch" href="/docs/assets/js/15.2f851491.js"><link rel="prefetch" href="/docs/assets/js/16.fa821c02.js"><link rel="prefetch" href="/docs/assets/js/17.4556dfbe.js"><link rel="prefetch" href="/docs/assets/js/18.4f40ea04.js"><link rel="prefetch" href="/docs/assets/js/19.a8c65aff.js"><link rel="prefetch" href="/docs/assets/js/20.eb810581.js"><link rel="prefetch" href="/docs/assets/js/21.6ee52bc5.js"><link rel="prefetch" href="/docs/assets/js/22.9507d23b.js"><link rel="prefetch" href="/docs/assets/js/23.58ed4097.js"><link rel="prefetch" href="/docs/assets/js/24.88dca6d4.js"><link rel="prefetch" href="/docs/assets/js/25.b1ca5007.js"><link rel="prefetch" href="/docs/assets/js/26.9a241b9b.js"><link rel="prefetch" href="/docs/assets/js/27.716654d0.js"><link rel="prefetch" href="/docs/assets/js/28.10c1e483.js"><link rel="prefetch" href="/docs/assets/js/29.dfc72b5f.js"><link rel="prefetch" href="/docs/assets/js/3.204e4229.js"><link rel="prefetch" href="/docs/assets/js/30.c66e083f.js"><link rel="prefetch" href="/docs/assets/js/31.568d9fb6.js"><link rel="prefetch" href="/docs/assets/js/32.e802b75d.js"><link rel="prefetch" href="/docs/assets/js/33.691a5bb6.js"><link rel="prefetch" href="/docs/assets/js/34.1e5a1c01.js"><link rel="prefetch" href="/docs/assets/js/35.17b11923.js"><link rel="prefetch" href="/docs/assets/js/36.5d629ef2.js"><link rel="prefetch" href="/docs/assets/js/37.e87d0a97.js"><link rel="prefetch" href="/docs/assets/js/38.955d1292.js"><link rel="prefetch" href="/docs/assets/js/39.a07de4ca.js"><link rel="prefetch" href="/docs/assets/js/4.d382fc80.js"><link rel="prefetch" href="/docs/assets/js/40.d4073f81.js"><link rel="prefetch" href="/docs/assets/js/41.829b4578.js"><link rel="prefetch" href="/docs/assets/js/42.ec1740ef.js"><link rel="prefetch" href="/docs/assets/js/43.b2ddcfb0.js"><link rel="prefetch" href="/docs/assets/js/44.545a0016.js"><link rel="prefetch" href="/docs/assets/js/45.671c328f.js"><link rel="prefetch" href="/docs/assets/js/46.d0d8528c.js"><link rel="prefetch" href="/docs/assets/js/47.9ffb6059.js"><link rel="prefetch" href="/docs/assets/js/48.9685aa58.js"><link rel="prefetch" href="/docs/assets/js/49.53dd281f.js"><link rel="prefetch" href="/docs/assets/js/5.8ddecc67.js"><link rel="prefetch" href="/docs/assets/js/50.6ec32cae.js"><link rel="prefetch" href="/docs/assets/js/51.a38128bf.js"><link rel="prefetch" href="/docs/assets/js/52.623efbff.js"><link rel="prefetch" href="/docs/assets/js/53.d4c77b92.js"><link rel="prefetch" href="/docs/assets/js/54.935d1177.js"><link rel="prefetch" href="/docs/assets/js/55.6eea3a30.js"><link rel="prefetch" href="/docs/assets/js/56.dbde1579.js"><link rel="prefetch" href="/docs/assets/js/57.73ca8622.js"><link rel="prefetch" href="/docs/assets/js/58.411f8503.js"><link rel="prefetch" href="/docs/assets/js/59.cf72de43.js"><link rel="prefetch" href="/docs/assets/js/6.e462c815.js"><link rel="prefetch" href="/docs/assets/js/60.9e38372c.js"><link rel="prefetch" href="/docs/assets/js/61.1c4522b5.js"><link rel="prefetch" href="/docs/assets/js/62.1aab8bfa.js"><link rel="prefetch" href="/docs/assets/js/63.3914fe5b.js"><link rel="prefetch" href="/docs/assets/js/64.d4085390.js"><link rel="prefetch" href="/docs/assets/js/65.9394620d.js"><link rel="prefetch" href="/docs/assets/js/66.ea4f62a4.js"><link rel="prefetch" href="/docs/assets/js/67.5eee6e92.js"><link rel="prefetch" href="/docs/assets/js/68.47bbc1d5.js"><link rel="prefetch" href="/docs/assets/js/69.7509cd19.js"><link rel="prefetch" href="/docs/assets/js/7.47112ec1.js"><link rel="prefetch" href="/docs/assets/js/71.69b98d16.js"><link rel="prefetch" href="/docs/assets/js/72.e105e3d7.js"><link rel="prefetch" href="/docs/assets/js/8.8ef598af.js"><link rel="prefetch" href="/docs/assets/js/9.7dc718fa.js">
|
|
<link rel="stylesheet" href="/docs/assets/css/0.styles.3b77bb8f.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/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#basic-configuration" class="sidebar-link">Basic configuration</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#store-and-load-templates" class="sidebar-link">Store and load templates</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Storage.html#setup-the-server" class="sidebar-link">Setup the server</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#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 aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings</p> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This guide requires GrapesJS v0.14.15 or higher</p></div> <p></p><div class="table-of-contents"><ul><li><a href="#basic-configuration">Basic configuration</a></li><li><a href="#setup-remote-storage">Setup remote storage</a></li><li><a href="#store-and-load-templates">Store and load templates</a></li><li><a href="#setup-the-server">Setup the server</a></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="#examples">Examples</a></li></ul></li><li><a href="#events">Events</a></li></ul></div><p></p> <h2 id="basic-configuration"><a href="#basic-configuration" class="header-anchor">#</a> Basic configuration</h2> <p>The storage manager is a built-in module implemented inside GrapesJS which allows the persistence of your data. By default, GrapesJS saves the data locally by using the built-in <code>LocalStorage</code> which just 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>.
|
|
You can initialize the editor with different storage configurations via <code>storageManager</code> option:</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>
|
|
storageManager<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
id<span class="token operator">:</span> <span class="token string">'gjs-'</span><span class="token punctuation">,</span> <span class="token comment">// Prefix identifier that will be used on parameters</span>
|
|
type<span class="token operator">:</span> <span class="token string">'local'</span><span class="token punctuation">,</span> <span class="token comment">// Type of the storage</span>
|
|
autosave<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// Store data automatically</span>
|
|
autoload<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>
|
|
stepsBeforeSave<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// If autosave enabled, indicates how many changes are necessary before store method is triggered</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>The <code>id</code> option is used to prevent collisions (quite common with localStorage) in case of multiple editors on the same page, therefore you will see parameters passed like <code>{ 'gjs-components': '...', 'gjs-styles': '...', }</code></p> <p>If you need to disable the storage manager you can pass any empty <code>type</code>:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</span>
|
|
storageManager<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token keyword">null</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
</code></pre></div><p>For all other available options check directly the <a href="https://github.com/artf/grapesjs/blob/dev/src/storage_manager/config/config.js" target="_blank" rel="noopener noreferrer">configuration source file<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="setup-remote-storage"><a href="#setup-remote-storage" class="header-anchor">#</a> Setup remote storage</h2> <p>Switching up the remote storage is very simple, it's just a matter of specifying your endpoints for storing and loading, which generally might be also the same (if you rely on HTTP methods).</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>
|
|
storageManager<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
type<span class="token operator">:</span> <span class="token string">'remote'</span><span class="token punctuation">,</span>
|
|
stepsBeforeSave<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
|
|
urlStore<span class="token operator">:</span> <span class="token string">'http://endpoint/store-template/some-id-123'</span><span class="token punctuation">,</span>
|
|
urlLoad<span class="token operator">:</span> <span class="token string">'http://endpoint/load-template/some-id-123'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// For custom parameters/headers on requests</span>
|
|
params<span class="token operator">:</span> <span class="token punctuation">{</span> _some_token<span class="token operator">:</span> <span class="token string">'....'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
headers<span class="token operator">:</span> <span class="token punctuation">{</span> Authorization<span class="token operator">:</span> <span class="token string">'Basic ...'</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>As you can see we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.</p> <h2 id="store-and-load-templates"><a href="#store-and-load-templates" class="header-anchor">#</a> Store and load templates</h2> <p>Even without a fully working endpoint, you can see what is sent from the editor by triggering the store and looking in the network panel of the inspector. GrapesJS sends mainly 4 types of parameters and it prefixes them with the <code>gjs-</code> key (you can disable it via <code>storageManager.id</code>). From the parameters, you will get the final result in 'gjs-html' and 'gjs-css' and this is what actually your end-users will gonna see on the final template/page. The other two, 'gjs-components' and 'gjs-styles', are a JSON representation of your template and therefore those should be used for the template editing. <strong>So be careful</strong>, GrapesJS is able to start from any HTML/CSS but use this approach only for importing already existent HTML templates, once the user starts editing, rely always on JSON objects because the HTML doesn't contain information about your components. You can achieve it in a pretty straightforward way and if you load your page by server-side you don't even need to load asynchronously your data (so you can turn off the <code>autoload</code>).</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Lets say, for instance, you start with your already defined HTML template and you'd like to</span>
|
|
<span class="token comment">// import it on fly for the user</span>
|
|
<span class="token keyword">const</span> LandingPage <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
html<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div>...</div></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
|
|
css<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
|
components<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
|
style<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// ...</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 comment">// If set to true, then the content within the wrapper element overrides the following config,</span>
|
|
fromElement<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// The `components` accepts HTML string or a JSON of components</span>
|
|
<span class="token comment">// Here, at first, we check and use components if are already defined, otherwise</span>
|
|
<span class="token comment">// the HTML string gonna be used</span>
|
|
components<span class="token operator">:</span> LandingPage<span class="token punctuation">.</span>components <span class="token operator">||</span> LandingPage<span class="token punctuation">.</span>html<span class="token punctuation">,</span>
|
|
<span class="token comment">// We might want to make the same check for styles</span>
|
|
style<span class="token operator">:</span> LandingPage<span class="token punctuation">.</span>style <span class="token operator">||</span> LandingPage<span class="token punctuation">.</span>css<span class="token punctuation">,</span>
|
|
<span class="token comment">// As we already initialize the editor with the template we can skip the `autoload`</span>
|
|
storageManager<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
autoload<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><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>If for any reason you need to get the data from the remote storage you can trigger the load, at any time, manually</p> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Load callback'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Similarly, you have the same control over the storing. By default, the <code>autosave</code> is enabled and is triggered by how many changes are made to the template (change it via <code>stepsBeforeSave</code> option). As before, you can disable this behavior and trigger it manually when you need it</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">...</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>
|
|
storageManager<span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
autosave<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><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// Call load somewhere</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">store</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Store callback'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>If you need to check changes which yet need to be stored you can use <code>editor.getDirtyCount()</code>. At any, successful, store of the editor, it resets the count.</p> <h2 id="setup-the-server"><a href="#setup-the-server" class="header-anchor">#</a> Setup the server</h2> <p>Server configuration might differ for any use case so generally, it's something up to you on how to make it work, but usually, the flow is pretty straightforward. Create two endpoints, one for storing (eg. <code>mydomain.com/store-page/123</code>) and the other one for loading (eg. <code>mydomain.com/load-page/123</code>), you can also create just one and distinguish them via HTTP methods (eg. <code>mydomain.com/page/123</code>, via GET you load the template, with POST you store it).
|
|
When you <strong>store</strong>, the editor doesn't expect any particular result but only a valid response from the server (status code 200).
|
|
When you <strong>load</strong> the template, return a JSON object with the data you have (don't forget to include the <code>id</code> prefix if it's used)</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
|
|
<span class="token comment">// `gjs-` is the id prefix</span>
|
|
<span class="token string">'gjs-components'</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> tagName<span class="token operator">:</span> <span class="token string">'div'</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 operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token string">'gjs-styles'</span><span class="token operator">:</span> <span class="token punctuation">[</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 operator">...</span><span class="token punctuation">}</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>
|
|
</code></pre></div><p>Be sure to have a correct <code>Content-Type</code> response header, eg. in PHP you would do something like this:</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token function">header</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Content-Type: application/json'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">echo</span> <span class="token function">json_encode</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
|
<span class="token string single-quoted-string">'gjs-components'</span><span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token string single-quoted-string">'gjs-styles'</span><span class="token punctuation">:</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 punctuation">;</span>
|
|
</code></pre></div><h2 id="storage-api"><a href="#storage-api" class="header-anchor">#</a> Storage API</h2> <p>The Storage module has also its own <a href="https://github.com/artf/grapesjs/wiki/API-Storage-Manager" target="_blank" rel="noopener noreferrer">set of 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> 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>One of the most useful methods of API is the possibility to add new storages. You might think, we have the <code>local</code> and <code>remote</code> storages, what else do we need, right? Well, let's take as an example the <code>local</code> one. As you already know, it 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> which is really cool and easy to use but one of his specs might be a big limit, by default it has a limited amount of MB to use per site (something around 5MB-10MB, depends on the browser implementation). As an alternative, we can make use of <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API" target="_blank" rel="noopener noreferrer">IndexedDB<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 is also quite <a href="https://caniuse.com/#search=indexedDB" target="_blank" rel="noopener noreferrer">well supported<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> and allows more space usage (each browser implements its own rules, for a better understanding on how browser storage limits work, check <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria" target="_blank" rel="noopener noreferrer">here<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>).
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB" target="_blank" rel="noopener noreferrer">IndexedDB configuration<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> might be too much verbose for this guide so we decided to create the <a href="https://github.com/artf/grapesjs-indexeddb" target="_blank" rel="noopener noreferrer">grapesjs-indexeddb<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> plugin, so you can check its source and see how it's implemented. For this guide we are going to see something much simpler but with the same flow, it'll be just a simple javascript object which stores key-value data, not persistent at all but the concept is the same.</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>
|
|
storageManager<span class="token operator">:</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> <span class="token string">'simple-storage'</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">// Here our `simple-storage` implementation</span>
|
|
<span class="token keyword">const</span> SimpleStorage <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
editor<span class="token punctuation">.</span>StorageManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'simple-storage'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">/**
|
|
* Load the data
|
|
* @param {Array} keys Array containing values to load, eg, ['gjs-components', 'gjs-styles', ...]
|
|
* @param {Function} clb Callback function to call when the load is ended
|
|
* @param {Function} clbErr Callback function to call in case of errors
|
|
*/</span>
|
|
<span class="token function">load</span><span class="token punctuation">(</span><span class="token parameter">keys<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> clbErr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
|
|
keys<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">key</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> value <span class="token operator">=</span> SimpleStorage<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
result<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> value<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">// Might be called inside some async method</span>
|
|
<span class="token function">clb</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">/**
|
|
* Store the data
|
|
* @param {Object} data Data object to store
|
|
* @param {Function} clb Callback function to call when the load is ended
|
|
* @param {Function} clbErr Callback function to call in case of errors
|
|
*/</span>
|
|
<span class="token function">store</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> clbErr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
SimpleStorage<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> data<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token comment">// Might be called inside some async method</span>
|
|
<span class="token function">clb</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 create more complex uses. 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> sm <span class="token operator">=</span> editor<span class="token punctuation">.</span>StorageManager<span class="token punctuation">;</span>
|
|
|
|
sm<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'local-remote'</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 class="token punctuation">,</span> clb<span class="token punctuation">,</span> clbErr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> remote <span class="token operator">=</span> sm<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">const</span> local <span class="token operator">=</span> sm<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 comment">// ...</span>
|
|
remote<span class="token punctuation">.</span><span class="token function">store</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> <span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// eg. some error on remote side, store it locally</span>
|
|
local<span class="token punctuation">.</span><span class="token function">store</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> clbError<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 function">load</span><span class="token punctuation">(</span><span class="token parameter">keys<span class="token punctuation">,</span> clb<span class="token punctuation">,</span> clbErr</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><p>If you need to completely replace the storage, just use the same id in <code>add</code> method</p> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>StorageManager<span class="token punctuation">.</span><span class="token function">add</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 comment">// New logic for the local storage</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 function">store</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="examples"><a href="#examples" class="header-anchor">#</a> Examples</h3> <p>Here you can find some of the plugins extending the Storage Manager</p> <ul><li><a href="https://github.com/artf/grapesjs-indexeddb" target="_blank" rel="noopener noreferrer">grapesjs-indexeddb<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> - Storage wrapper for IndexedDB</li> <li><a href="https://github.com/artf/grapesjs-firestore" target="_blank" rel="noopener noreferrer">grapesjs-firestore<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> - Storage wrapper for <a href="https://firebase.google.com/docs/firestore" target="_blank" rel="noopener noreferrer">Cloud Firestore<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></li></ul> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>Another way to extend storage capabilities is to make use of GrapesJS's event hooks, you can check <a href="https://github.com/artf/grapesjs/wiki/API-Editor#storages" target="_blank" rel="noopener noreferrer">here<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> the list of all available events for the Storage module. Let's see some of the cases where you might want to use them:</p> <ul><li>Loading animation on storage requests</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'storage:start'</span><span class="token punctuation">,</span> startLoading<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'storage:end'</span><span class="token punctuation">,</span> endLoading<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><ul><li>Error handling</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'storage:error'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></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">Error: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>err<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>
|
|
</code></pre></div><ul><li>Extend parameters to store</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'storage:start:store'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">objectToStore</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>needToAddExtraParam<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
objectToStore<span class="token punctuation">.</span>customHtml <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><div>...</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><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">...</div></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>
|
|
</code></pre></div><ul><li>Do stuff post load</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'storage:end:load'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">resultObject</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>resultObject<span class="token punctuation">.</span>hasSomeKey<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// do stuff</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> <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">12/11/2020, 11:32:49 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.f6ceb853.js" defer></script><script src="/docs/assets/js/11.c4867228.js" defer></script><script src="/docs/assets/js/2.15028157.js" defer></script><script src="/docs/assets/js/70.f312d5fd.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|