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.
592 lines
130 KiB
592 lines
130 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Getting Started | 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">
|
|
<meta name="keywords" content="grapesjs getting started">
|
|
|
|
<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/77.a896626f.js" as="script"><link rel="preload" href="/docs/assets/js/29.5888c207.js" as="script"><link rel="preload" href="/docs/assets/js/21.2b429912.js" as="script"><link rel="preload" href="/docs/assets/js/20.68039d84.js" as="script"><link rel="preload" href="/docs/assets/js/22.27b0a8c5.js" as="script"><link rel="preload" href="/docs/assets/js/24.74960541.js" as="script"><link rel="preload" href="/docs/assets/js/25.ca71342f.js" as="script"><link rel="preload" href="/docs/assets/js/27.54f6b393.js" as="script"><link rel="preload" href="/docs/assets/js/23.a6d68e8d.js" as="script"><link rel="preload" href="/docs/assets/js/26.33a13a48.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/28.cf1f128d.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/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/92.d3e7c08c.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 page__getting-started"><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" aria-current="page" class="active sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/getting-started.html#import-the-library" class="sidebar-link">Import the library</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#start-from-the-canvas" class="sidebar-link">Start from the canvas</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#add-blocks" class="sidebar-link">Add Blocks</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#define-components" class="sidebar-link">Define Components</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#panels-buttons" class="sidebar-link">Panels & Buttons</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#layers" class="sidebar-link">Layers</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#style-manager" class="sidebar-link">Style Manager</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#traits" class="sidebar-link">Traits</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#responsive-templates" class="sidebar-link">Responsive templates</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#store-load-data" class="sidebar-link">Store & load data</a></li><li class="sidebar-sub-header"><a href="/docs/getting-started.html#theming" class="sidebar-link">Theming</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><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" class="sidebar-link">Storage Manager</a></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="getting-started"><a href="#getting-started" class="header-anchor">#</a> Getting Started</h1> <p>This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of the most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the <a href="#final-result">final result</a>.</p> <h2 id="import-the-library"><a href="#import-the-library" class="header-anchor">#</a> Import the library</h2> <p>Before you start using GrapesJS, you'll have to import it. Let's import the latest version:</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>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//unpkg.com/grapesjs/dist/css/grapes.min.css<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>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>//unpkg.com/grapesjs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></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 comment"><!--
|
|
If you need plugins, put them below the main grapesjs script
|
|
<script src="/path/to/some/plugin.min.js"></script>
|
|
--></span>
|
|
</code></pre></div><p>or if you're in a Node environment</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token string">'grapesjs/dist/css/grapes.min.css'</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">import</span> grapesjs <span class="token keyword">from</span> <span class="token string">'grapesjs'</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// If you need plugins, put them below the main grapesjs script</span>
|
|
<span class="token comment">// import 'grapesjs-some-plugin';</span>
|
|
</code></pre></div><h2 id="start-from-the-canvas"><a href="#start-from-the-canvas" class="header-anchor">#</a> Start from the canvas</h2> <p>The first step is to define the interface of our editor. For this purpose we gonna start with basic HTML layouts. Finding a common structure for the UI of any project is not an easy task. That's why GrapesJS prefers to keep this process as simple as possible. We provide a few helpers, but let the user define the interface. This guarantees maximum flexibility.
|
|
The main part of the GrapesJS editor is the canvas, this is where you create the structure of your templates and you can't miss it. Let's try to initiate the editor with the canvas and no panels.</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>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>h1</span><span class="token punctuation">></span></span>Hello World Component!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</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>
|
|
</code></pre></div><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 comment">// Indicate where to init the editor. You can also pass an HTMLElement</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 comment">// Get the content for the canvas directly from the element</span>
|
|
<span class="token comment">// As an alternative we could use: `components: '<h1>Hello World Component!</h1>'`,</span>
|
|
<span class="token literal-property property">fromElement</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Size of the editor</span>
|
|
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'300px'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Disable the storage manager for the moment</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 comment">// Avoid any default panel</span>
|
|
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">defaults</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><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* Let's highlight canvas boundaries */</span>
|
|
<span class="token selector">#gjs</span> <span class="token punctuation">{</span>
|
|
<span class="token property">border</span><span class="token punctuation">:</span> 3px solid #444<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment">/* Reset some default styling */</span>
|
|
<span class="token selector">.gjs-cv-canvas</span> <span class="token punctuation">{</span>
|
|
<span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
|
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
|
|
<span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><div class="demo-container" data-v-b3715568><div id="gjs"><h1>Hello World Component!</h1></div></div> <p>With just the canvas you're already able to move, copy and delete components from the structure. For now, we see the example template taken from the container. Next let's look at how to create and drag custom blocks into our canvas.</p> <h2 id="add-blocks"><a href="#add-blocks" class="header-anchor">#</a> Add Blocks</h2> <p>The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, a button, or an entire section with videos, forms and iframes. Let's start by creating another container and append a few basic blocks inside of it. Later we can use this technique to build more complex structures.</p> <div class="language-html extra-class"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><br></div><pre class="language-html"><code><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>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>blocks<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>
|
|
</code></pre></div><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 comment">// ...</span>
|
|
<span class="token literal-property property">blockManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">appendTo</span><span class="token operator">:</span> <span class="token string">'#blocks'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">blocks</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> <span class="token string">'section'</span><span class="token punctuation">,</span> <span class="token comment">// id is mandatory</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'<b>Section</b>'</span><span class="token punctuation">,</span> <span class="token comment">// You can use HTML/SVG inside labels</span>
|
|
<span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token keyword">class</span><span class="token operator">:</span><span class="token string">'gjs-block-section'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><section>
|
|
<h1>This is a simple title</h1>
|
|
<div>This is just a Lorem text: Lorem ipsum dolor sit amet</div>
|
|
</section></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">id</span><span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Text'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'<div data-gjs-type="text">Insert your text here</div>'</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">id</span><span class="token operator">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Image'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Select the component once it's dropped</span>
|
|
<span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// You can pass components as a JSON instead of a simple HTML string,</span>
|
|
<span class="token comment">// in this case we also use a defined component type `image`</span>
|
|
<span class="token literal-property property">content</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">'image'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// This triggers `active` event on dropped components and the `image`</span>
|
|
<span class="token comment">// reacts by opening the AssetManager</span>
|
|
<span class="token literal-property property">activate</span><span class="token operator">:</span> <span class="token boolean">true</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><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.gjs-block</span> <span class="token punctuation">{</span>
|
|
<span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
|
<span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
|
<span class="token property">min-height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><div class="demo-container" data-v-b3715568><div><div id="gjs2" class="gjs"><h1>Hello World Component!</h1></div> <div id="blocks2"></div></div></div> <p>As you can see we add our blocks via the initial configuration. Obviously there might be a case in which you would like to add them dynamically, in this case you have to use the <a href="/docs/api/block_manager.html">Block Manager API</a>:</p> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-block-id'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">category</span><span class="token operator">:</span> <span class="token string">'...'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>If you want to learn more about blocks we suggest reading its dedicated article: <a href="/docs/modules/Blocks.html">Block Manager Module</a>.</p></div> <h2 id="define-components"><a href="#define-components" class="header-anchor">#</a> Define Components</h2> <p>Technically, once you drop your HTML block inside the canvas each element of the content is transformed into a GrapesJS Component. A GrapesJS Component is an object containing information about how the element is rendered in the canvas (managed in the View) and how it might look in its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View. Therefore, if you add a new attribute to the model, it will be available in the export code (which we will learn more about later), and the element you see in the canvas will be updated with new attributes.
|
|
This isn't totally out of the ordinary, but the unique thing about Components is that you can create a totally decoupled View. This means you can show the user whatever you desire regardless of what is in the Model. For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If you want to learn more about Custom Components, you should check out <a href="/docs/modules/Components.html">Component Manager Module</a>.</p> <p>GrapesJS comes with a few <a href="/docs/modules/Components.html#built-in-component-types">built-in Components</a> that enable different features once rendered in the canvas. For example, by double clicking on an image component you will see the default <a href="/docs/modules/Assets.html">Asset Manager</a>, which you can customize or integrate your own. By double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customizable and <a href="/docs/guides/Replace-Rich-Text-Editor.html">replaceable</a>.</p> <p>As we have seen before you can create Blocks directly as Components:</p> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>BlockManager<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'my-block-id'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">tagName</span><span class="token operator">:</span> <span class="token string">'div'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">draggable</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">attributes</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'some-attribute'</span><span class="token operator">:</span> <span class="token string">'some-value'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">tagName</span><span class="token operator">:</span> <span class="token string">'span'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token string">'<b>Some static content</b>'</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">tagName</span><span class="token operator">:</span> <span class="token string">'div'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// use `content` for static strings, `components` string will be parsed</span>
|
|
<span class="token comment">// and transformed in Components</span>
|
|
<span class="token literal-property property">components</span><span class="token operator">:</span> <span class="token string">'<span>HTML at some point</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>
|
|
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Check out the <a href="/docs/api/components.html">Components API</a> to learn how to interact with components dynamically.</p></div> <p>An example of how to select some inner component and replace its children with new contents:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// The wrapper is the root Component</span>
|
|
<span class="token keyword">const</span> wrapper <span class="token operator">=</span> editor<span class="token punctuation">.</span>DomComponents<span class="token punctuation">.</span><span class="token function">getWrapper</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> myComponent <span class="token operator">=</span> wrapper<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'div.my-component'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
|
myComponent<span class="token punctuation">.</span><span class="token function">components</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">component</span> <span class="token operator">=></span> <span class="token comment">/* ... do something ... */</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
myComponent<span class="token punctuation">.</span><span class="token function">components</span><span class="token punctuation">(</span><span class="token string">'<div>New content</div>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="panels-buttons"><a href="#panels-buttons" class="header-anchor">#</a> Panels & Buttons</h2> <p>Now that we have a canvas and custom blocks let's see how to create a new custom panel with some buttons inside (using <a href="/docs/api/panels.html">Panels API</a>) which trigger commands (the core one or custom).</p> <div class="language-html extra-class"><div class="highlight-lines"><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br><br><br><br></div><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__top<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__basic-actions<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>div</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>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>blocks<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>
|
|
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.panel__top</span> <span class="token punctuation">{</span>
|
|
<span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
|
<span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
|
|
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
|
<span class="token property">position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
|
|
<span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
|
<span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token selector">.panel__basic-actions</span> <span class="token punctuation">{</span>
|
|
<span class="token property">position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span>Panels<span class="token punctuation">.</span><span class="token function">addPanel</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'panel-top'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'.panel__top'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
editor<span class="token punctuation">.</span>Panels<span class="token punctuation">.</span><span class="token function">addPanel</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'basic-actions'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'.panel__basic-actions'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">buttons</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> <span class="token string">'visibility'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// active by default</span>
|
|
<span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'btn-toggle-borders'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'<u>B</u>'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'sw-visibility'</span><span class="token punctuation">,</span> <span class="token comment">// Built-in command</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'export'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'btn-open-export'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Exp'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'export-template'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">context</span><span class="token operator">:</span> <span class="token string">'export-template'</span><span class="token punctuation">,</span> <span class="token comment">// For grouping context of buttons from the same panel</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'show-json'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'btn-show-json'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'JSON'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">context</span><span class="token operator">:</span> <span class="token string">'show-json'</span><span class="token punctuation">,</span>
|
|
<span class="token function">command</span><span class="token punctuation">(</span><span class="token parameter">editor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
editor<span class="token punctuation">.</span>Modal<span class="token punctuation">.</span><span class="token function">setTitle</span><span class="token punctuation">(</span><span class="token string">'Components JSON'</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">setContent</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><textarea style="width:100%; height: 250px;">
|
|
</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>editor<span class="token punctuation">.</span><span class="token function">getComponents</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
|
|
</textarea></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">.</span><span class="token function">open</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 punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="demo-container" data-v-b3715568><div><div id="panel__top3" class="panel__top"><div id="panel__basic-actions3" class="panel__basic-actions"></div></div> <div id="gjs3" class="gjs"><h1>Hello World Component!</h1></div> <div id="blocks3"></div></div></div> <p>We have defined where to render the panel with <code>el: '#basic-panel'</code> and then for each button we added a <code>command</code> property. The command could be the id, an object with <code>run</code> and <code>stop</code> functions or simply a single function.
|
|
Try to use <a href="/docs/api/commands.html">Commands</a> when possible, they allow you to track actions globally. Commands also execute callbacks before and after their execution (you can even interrupt them).</p> <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">'run:export-template:before'</span><span class="token punctuation">,</span> <span class="token parameter">opts</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Before the command run'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token number">0</span> <span class="token comment">/* some condition */</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
opts<span class="token punctuation">.</span>abort <span class="token operator">=</span> <span class="token number">1</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>
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'run:export-template'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</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">'After the command run'</span><span class="token punctuation">)</span><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">'abort:export-template'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</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">'Command aborted'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Check out the <a href="/docs/api/panels.html">Panels API</a> to see all the available methods.</p></div> <h2 id="layers"><a href="#layers" class="header-anchor">#</a> Layers</h2> <p>Another utility tool you might find useful when working with web elements is the layer manager. It's a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it.</p> <div class="language-html extra-class"><div class="highlight-lines"><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><br><br></div><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__top<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__basic-actions<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>div</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>editor-row<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>editor-canvas<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>div</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__right<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layers-container<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>div</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>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>blocks<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>
|
|
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.editor-row</span> <span class="token punctuation">{</span>
|
|
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
|
<span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span>
|
|
<span class="token property">align-items</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span>
|
|
<span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span>
|
|
<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector">.editor-canvas</span> <span class="token punctuation">{</span>
|
|
<span class="token property">flex-grow</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token selector">.panel__right</span> <span class="token punctuation">{</span>
|
|
<span class="token property">flex-basis</span><span class="token punctuation">:</span> 230px<span class="token punctuation">;</span>
|
|
<span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
|
|
<span class="token property">overflow-y</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><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 comment">// ...</span>
|
|
<span class="token literal-property property">layerManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">appendTo</span><span class="token operator">:</span> <span class="token string">'.layers-container'</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// We define a default panel as a sidebar to contain layers</span>
|
|
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</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> <span class="token string">'layers'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'.panel__right'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Make the panel resizable</span>
|
|
<span class="token literal-property property">resizable</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">maxDim</span><span class="token operator">:</span> <span class="token number">350</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">minDim</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">tc</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// Top handler</span>
|
|
<span class="token literal-property property">cl</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment">// Left handler</span>
|
|
<span class="token literal-property property">cr</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// Right handler</span>
|
|
<span class="token literal-property property">bc</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// Bottom handler</span>
|
|
<span class="token comment">// Being a flex child we need to change `flex-basis` property</span>
|
|
<span class="token comment">// instead of the `width` (default)</span>
|
|
<span class="token literal-property property">keyWidth</span><span class="token operator">:</span> <span class="token string">'flex-basis'</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 punctuation">;</span>
|
|
</code></pre></div><div class="demo-container" data-v-b3715568><div><div id="panel__top4" class="panel__top"><div id="panel__basic-actions4" class="panel__basic-actions"></div></div> <div class="editor-row"><div class="editor-canvas"><div id="gjs4" class="gjs"><h1>Hello World Component!</h1></div></div> <div id="panel__right4" class="panel__right"><div id="layers-container"></div></div></div> <div id="blocks4"></div></div></div> <h2 id="style-manager"><a href="#style-manager" class="header-anchor">#</a> Style Manager</h2> <p>Once you have defined the structure of the template the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.</p> <p>Let's start by adding one more panel inside the <code>panel__right</code> and another one in <code>panel__top</code> which will contain a Layer/Style Manager switcher:</p> <div class="language-html extra-class"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__top<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__basic-actions<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__switcher<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>div</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__right<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layers-container<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styles-container<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>div</span><span class="token punctuation">></span></span>
|
|
...
|
|
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.panel__switcher</span> <span class="token punctuation">{</span>
|
|
<span class="token property">position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><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 comment">// ...</span>
|
|
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'panel-switcher'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'.panel__switcher'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">buttons</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> <span class="token string">'show-layers'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Layers'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'show-layers'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Once activated disable the possibility to turn it off</span>
|
|
<span class="token literal-property property">togglable</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>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'show-style'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Styles'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'show-styles'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">togglable</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>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// The Selector Manager allows to assign classes and</span>
|
|
<span class="token comment">// different states (eg. :hover) on components.</span>
|
|
<span class="token comment">// Generally, it's used in conjunction with Style Manager</span>
|
|
<span class="token comment">// but it's not mandatory</span>
|
|
<span class="token literal-property property">selectorManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">appendTo</span><span class="token operator">:</span> <span class="token string">'.styles-container'</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">styleManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">appendTo</span><span class="token operator">:</span> <span class="token string">'.styles-container'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">sectors</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Dimension'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Use built-in properties</span>
|
|
<span class="token literal-property property">buildProps</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token string">'min-height'</span><span class="token punctuation">,</span> <span class="token string">'padding'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Use `properties` to define/override single property</span>
|
|
<span class="token literal-property property">properties</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token comment">// Type of the input,</span>
|
|
<span class="token comment">// options: integer | radio | select | color | slider | file | composite | stack</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'integer'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'The width'</span><span class="token punctuation">,</span> <span class="token comment">// Label for the property</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'width'</span><span class="token punctuation">,</span> <span class="token comment">// CSS property (if buildProps contains it will be extended)</span>
|
|
<span class="token literal-property property">units</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'px'</span><span class="token punctuation">,</span> <span class="token string">'%'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Units, available only for 'integer' types</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token string">'auto'</span><span class="token punctuation">,</span> <span class="token comment">// Default value</span>
|
|
<span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// Min value, available only for 'integer' types</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 literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Extra'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">open</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">buildProps</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'background-color'</span><span class="token punctuation">,</span> <span class="token string">'box-shadow'</span><span class="token punctuation">,</span> <span class="token string">'custom-prop'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">properties</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> <span class="token string">'custom-prop'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Custom Label'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">property</span><span class="token operator">:</span> <span class="token string">'font-size'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'select'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token string">'32px'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// List of options, available only for 'select' and 'radio' types</span>
|
|
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'12px'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Tiny'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'18px'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Medium'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span> <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">'32px'</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Big'</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 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">// Define commands</span>
|
|
editor<span class="token punctuation">.</span>Commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'show-layers'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token function">getRowEl</span><span class="token punctuation">(</span><span class="token parameter">editor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> editor<span class="token punctuation">.</span><span class="token function">getContainer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">'.editor-row'</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">getLayersEl</span><span class="token punctuation">(</span><span class="token parameter">row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> row<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.layers-container'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token function">run</span><span class="token punctuation">(</span><span class="token parameter">editor<span class="token punctuation">,</span> sender</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> lmEl <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getLayersEl</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRowEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
lmEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <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 function">stop</span><span class="token punctuation">(</span><span class="token parameter">editor<span class="token punctuation">,</span> sender</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> lmEl <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getLayersEl</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRowEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
lmEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</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>
|
|
editor<span class="token punctuation">.</span>Commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'show-styles'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token function">getRowEl</span><span class="token punctuation">(</span><span class="token parameter">editor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> editor<span class="token punctuation">.</span><span class="token function">getContainer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">'.editor-row'</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">getStyleEl</span><span class="token punctuation">(</span><span class="token parameter">row</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> row<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.styles-container'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token function">run</span><span class="token punctuation">(</span><span class="token parameter">editor<span class="token punctuation">,</span> sender</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> smEl <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getStyleEl</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRowEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
smEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <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 function">stop</span><span class="token punctuation">(</span><span class="token parameter">editor<span class="token punctuation">,</span> sender</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> smEl <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getStyleEl</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getRowEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
smEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</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="demo-container" data-v-b3715568><div><div id="panel__top5" class="panel__top"><div id="panel__basic-actions5" class="panel__basic-actions"></div> <div id="panel__switcher5" class="panel__switcher"></div></div> <div class="editor-row"><div class="editor-canvas"><div id="gjs5" class="gjs"><h1>Hello World Component!</h1></div></div> <div id="panel__right5" class="panel__right"><div id="layers-container5" class="layers-container"></div> <div id="styles-container5" class="styles-container"></div></div></div> <div id="blocks5"></div></div></div> <p>Inside Style Manager definition we use <code>buildProps</code> which helps us create common properties from <a href="/docs/modules/Style-manager.html#built-in-properties">available built-in objects</a> then in <code>properties</code> we can override same objects (eg. passing another <code>name</code> to change the label) identified by <code>property</code> name. As you can see from <code>custom-prop</code> example it's a matter of defining the CSS <code>property</code> and the input <code>type</code>. We suggest checking a more complete example of Style Manager properties usage from the <a href="https://github.com/GrapesJS/grapesjs/blob/gh-pages/demo.html#L1000" target="_blank" rel="noopener noreferrer">webpage preset demo<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="custom-block tip"><p class="custom-block-title">TIP</p> <p>Check the <a href="/docs/api/panels.html">Style Manager API</a> to see how to update sectors and properties dynamically.</p></div> <h2 id="traits"><a href="#traits" class="header-anchor">#</a> Traits</h2> <p>Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. Traits are commonly used to update HTML element attributes (eg. <code>placeholder</code> for inputs or <code>alt</code> for images), but you can also define your own custom traits. Access the selected Component model and do whatever you want. For this guide, we are going to show you how to render available traits, for more details on how to extend them we suggest you read the <a href="/docs/modules/Traits.html">Trait Manager Module page</a>.</p> <p>Let's create a new container for traits. Tell the editor where to render it and update the sidebar switcher:</p> <div class="language-html extra-class"><div class="highlight-lines"><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-html"><code>...
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__right<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layers-container<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styles-container<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>traits-container<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>div</span><span class="token punctuation">></span></span>
|
|
...
|
|
</code></pre></div><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 comment">// ...</span>
|
|
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'panel-switcher'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'.panel__switcher'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">buttons</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'show-traits'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'Traits'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'show-traits'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">togglable</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>
|
|
<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">traitManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">appendTo</span><span class="token operator">:</span> <span class="token string">'.traits-container'</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">// Define command</span>
|
|
<span class="token comment">// ...</span>
|
|
editor<span class="token punctuation">.</span>Commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'show-traits'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token function">getTraitsEl</span><span class="token punctuation">(</span><span class="token parameter">editor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> row <span class="token operator">=</span> editor<span class="token punctuation">.</span><span class="token function">getContainer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">'.editor-row'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">return</span> row<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.traits-container'</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">run</span><span class="token punctuation">(</span><span class="token parameter">editor<span class="token punctuation">,</span> sender</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getTraitsEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <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 function">stop</span><span class="token punctuation">(</span><span class="token parameter">editor<span class="token punctuation">,</span> sender</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getTraitsEl</span><span class="token punctuation">(</span>editor<span class="token punctuation">)</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</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="demo-container" data-v-b3715568><div><div id="panel__top6" class="panel__top"><div id="panel__basic-actions6" class="panel__basic-actions"></div> <div id="panel__switcher6" class="panel__switcher"></div></div> <div class="editor-row"><div class="editor-canvas"><div id="gjs6" class="gjs"><h1>Hello World Component!</h1></div></div> <div id="panel__right6" class="panel__right"><div id="layers-container6" class="layers-container"></div> <div id="styles-container6" class="styles-container"></div> <div id="traits-container6" class="traits-container"></div></div></div> <div id="blocks6"></div></div></div> <p>Now if you switch to the Trait panel and select one of the inner components you should see its default traits.</p> <h2 id="responsive-templates"><a href="#responsive-templates" class="header-anchor">#</a> Responsive templates</h2> <p>GrapesJS implements a module which allows you to work with responsive templates easily. Let's see how to define different devices and a button for device switching:</p> <div class="language-html extra-class"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br></div><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__top<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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__basic-actions<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__devices<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>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>panel__switcher<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>div</span><span class="token punctuation">></span></span>
|
|
...
|
|
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.panel__devices</span> <span class="token punctuation">{</span>
|
|
<span class="token property">position</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><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 comment">// ...</span>
|
|
<span class="token literal-property property">deviceManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">devices</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Desktop'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">// default size</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Mobile'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'320px'</span><span class="token punctuation">,</span> <span class="token comment">// this value will be used on canvas width</span>
|
|
<span class="token literal-property property">widthMedia</span><span class="token operator">:</span> <span class="token string">'480px'</span><span class="token punctuation">,</span> <span class="token comment">// this value will be used in CSS @media</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">// ...</span>
|
|
<span class="token literal-property property">panels</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'panel-devices'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">el</span><span class="token operator">:</span> <span class="token string">'.panel__devices'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">buttons</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> <span class="token string">'device-desktop'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'D'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'set-device-desktop'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">active</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">togglable</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>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'device-mobile'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">'M'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">command</span><span class="token operator">:</span> <span class="token string">'set-device-mobile'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">togglable</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>
|
|
<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">// Commands</span>
|
|
editor<span class="token punctuation">.</span>Commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'set-device-desktop'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token function-variable function">run</span><span class="token operator">:</span> <span class="token parameter">editor</span> <span class="token operator">=></span> editor<span class="token punctuation">.</span><span class="token function">setDevice</span><span class="token punctuation">(</span><span class="token string">'Desktop'</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
editor<span class="token punctuation">.</span>Commands<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'set-device-mobile'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token function-variable function">run</span><span class="token operator">:</span> <span class="token parameter">editor</span> <span class="token operator">=></span> editor<span class="token punctuation">.</span><span class="token function">setDevice</span><span class="token punctuation">(</span><span class="token string">'Mobile'</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="demo-container" data-v-b3715568><div><div id="panel__top7" class="panel__top"><div id="panel__basic-actions7" class="panel__basic-actions"></div> <div id="panel__devices7" class="panel__devices"></div> <div id="panel__switcher7" class="panel__switcher"></div></div> <div class="editor-row"><div class="editor-canvas"><div id="gjs7" class="gjs"><h1>Hello World Component!</h1></div></div> <div id="panel__right7" class="panel__right"><div id="layers-container7" class="layers-container"></div> <div id="styles-container7" class="styles-container"></div> <div id="traits-container7" class="traits-container"></div></div></div> <div id="blocks7"></div></div></div> <p>As you can see from the commands definition we use the <code>editor.setDevice</code> method to change the size of the viewport. In case you need to trigger an action on device change you can setup a listener like this:</p> <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">'change:device'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</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">'Current device: '</span><span class="token punctuation">,</span> editor<span class="token punctuation">.</span><span class="token function">getDevice</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>What about the mobile-first approach? You can achieve it by changing your configurations 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 comment">// ...</span>
|
|
<span class="token literal-property property">mediaCondition</span><span class="token operator">:</span> <span class="token string">'min-width'</span><span class="token punctuation">,</span> <span class="token comment">// default is `max-width`</span>
|
|
<span class="token literal-property property">deviceManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">devices</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Mobile'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'320'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">widthMedia</span><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 literal-property property">name</span><span class="token operator">:</span> <span class="token string">'Desktop'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">widthMedia</span><span class="token operator">:</span><span class="token string">'1024'</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">// ...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Set initial device as Mobile</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">setDevice</span><span class="token punctuation">(</span><span class="token string">'Mobile'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>Check out the <a href="/docs/api/device_manager.html">Device Manager API</a> to see all the available methods.</p></div> <h2 id="store-load-data"><a href="#store-load-data" class="header-anchor">#</a> Store & load data</h2> <p>Once you have finished with defining your builder interface the next step would be to setup the storing and loading process.
|
|
GrapesJS implements 2 simple type of storages inside its Storage Manager: The local (by using <code>localStorage</code>, active by default) and the remote one. Those are enough to cover most of the cases, but it's also possible to add new implementations (<a href="https://github.com/GrapesJS/storage-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> is a good example).
|
|
Let's see how the default options work:</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">'local'</span><span class="token punctuation">,</span> <span class="token comment">// Type of the storage, 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 enabled, indicates how many changes are necessary before store method is triggered</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">// Options for the `local` type</span>
|
|
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'gjsProject'</span><span class="token punctuation">,</span> <span class="token comment">// The key for the local 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 punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Let's take a look at the configuration required to setup the remote storage:</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 comment">// ...</span>
|
|
<span class="token literal-property property">stepsBeforeSave</span><span class="token operator">:</span> <span class="token number">10</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">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// Custom headers for the remote storage request</span>
|
|
<span class="token literal-property property">urlStore</span><span class="token operator">:</span> <span class="token string">'https://your-server/endpoint/store'</span><span class="token punctuation">,</span> <span class="token comment">// Endpoint URL where to store data project</span>
|
|
<span class="token literal-property property">urlLoad</span><span class="token operator">:</span> <span class="token string">'https://your-server/endpoint/load'</span><span class="token punctuation">,</span> <span class="token comment">// Endpoint URL where to load data project</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>As you might noticed, we've left some default options unchanged, increased changes necessary for autosave triggering and passed remote endpoints.
|
|
If you prefer you could also disable the autosaving and use a custom command to trigger the store:</p> <div class="language-js extra-class"><pre class="language-js"><code><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">autosave</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">commands</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">defaults</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'store-data'</span><span class="token punctuation">,</span>
|
|
<span class="token function">run</span><span class="token punctuation">(</span><span class="token parameter">editor</span><span class="token punctuation">)</span> <span class="token punctuation">{</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 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">// ...</span>
|
|
</code></pre></div><p>To get a better overview of the Storage Manager and how you should store/load the template, or how to define new storages you should read the <a href="/docs/modules/Storage.html">Storage Manager Module</a> page.</p> <h2 id="theming"><a href="#theming" class="header-anchor">#</a> Theming</h2> <p>One last step that might actually improve a lot your editor personality is how it looks visually. To achieve an easy theming we have adapted an atomic design for this purpose. So for example to customize the main palette of colors all you have to do is to place your custom CSS rules after the GrapesJS styles.</p> <p>To complete our builder let's customize its color palette and to make it more visually "readable" we can replace all button labels with SVG icons:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* We can remove the border we've set at the beginning */</span>
|
|
<span class="token selector">#gjs</span> <span class="token punctuation">{</span>
|
|
<span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token comment">/* Theming */</span>
|
|
|
|
<span class="token comment">/* Primary color for the background */</span>
|
|
<span class="token selector">.gjs-one-bg</span> <span class="token punctuation">{</span>
|
|
<span class="token property">background-color</span><span class="token punctuation">:</span> #78366a<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment">/* Secondary color for the text color */</span>
|
|
<span class="token selector">.gjs-two-color</span> <span class="token punctuation">{</span>
|
|
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.7<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment">/* Tertiary color for the background */</span>
|
|
<span class="token selector">.gjs-three-bg</span> <span class="token punctuation">{</span>
|
|
<span class="token property">background-color</span><span class="token punctuation">:</span> #ec5896<span class="token punctuation">;</span>
|
|
<span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
|
|
<span class="token comment">/* Quaternary color for the text color */</span>
|
|
<span class="token selector">.gjs-four-color,
|
|
.gjs-four-color-h:hover</span> <span class="token punctuation">{</span>
|
|
<span class="token property">color</span><span class="token punctuation">:</span> #ec5896<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>There is also a bunch of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" target="_blank" rel="noopener noreferrer">CSS custom properties (variables)<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 you can use to customize the styles of the editor.</p> <p>For example, you could achieve the same result as above by doing this:</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">:root</span> <span class="token punctuation">{</span>
|
|
<span class="token property">--gjs-primary-color</span><span class="token punctuation">:</span> #78366a<span class="token punctuation">;</span>
|
|
<span class="token property">--gjs-secondary-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.7<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token property">--gjs-tertiary-color</span><span class="token punctuation">:</span> #ec5896<span class="token punctuation">;</span>
|
|
<span class="token property">--gjs-quaternary-color</span><span class="token punctuation">:</span> #ec5896<span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div><p>And here is our final result:</p> <div id="final-result" class="demo-container" data-v-b3715568><div class="gjs__themed"><div id="panel__top8" class="panel__top"><div id="panel__basic-actions8" class="panel__basic-actions"></div> <div id="panel__devices8" class="panel__devices"></div> <div id="panel__switcher8" class="panel__switcher"></div></div> <div class="editor-row"><div class="editor-canvas"><div id="gjs8" class="gjs"><h1>Hello World Component!</h1></div></div> <div id="panel__right8" class="panel__right"><div id="layers-container8" class="layers-container"></div> <div id="styles-container8" class="styles-container"></div> <div id="traits-container8" class="traits-container"></div></div></div> <div id="blocks8"></div></div></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/getting-started.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">10/8/2023, 4:02:12 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/docs/" class="prev router-link-active">
|
|
Introduction
|
|
</a></span> <span class="next"><a href="/docs/modules/Components.html">
|
|
Components
|
|
</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/77.a896626f.js" defer></script><script src="/docs/assets/js/29.5888c207.js" defer></script><script src="/docs/assets/js/21.2b429912.js" defer></script><script src="/docs/assets/js/20.68039d84.js" defer></script><script src="/docs/assets/js/22.27b0a8c5.js" defer></script><script src="/docs/assets/js/24.74960541.js" defer></script><script src="/docs/assets/js/25.ca71342f.js" defer></script><script src="/docs/assets/js/27.54f6b393.js" defer></script><script src="/docs/assets/js/23.a6d68e8d.js" defer></script><script src="/docs/assets/js/26.33a13a48.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|