<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="theme-default-content"><h1>404</h1><blockquote>How did we get here?</blockquote><ahref="/docs/"class="router-link-active">
<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="theme-default-content"><h1>404</h1><blockquote>How did we get here?</blockquote><ahref="/docs/"class="router-link-active">
</code></pre></div><p>In just few lines, with the default configurations, you're already able to see something with which play around.</p><p>[[img/default-gjs.jpg]]</p><p>You'll see components commands on top left position that come handy to create and manage your blocks, below there are options which need to highlight and export them. When you select components ('mouse pointer' icon), on the right side, you should see pop up Class Manager and Style Manager options which allow to customize the style of the components. There is also a Layer Manager/Navigator ('hamburger' icon) which helps to manage easily the structure.</p><p>Of course all those stuff (panels, buttons, commands, etc.) are set just as default so you can overwrite them and add more other. Before you start to create things you should know that GrapesJS UI is composed basically by a canvas (where you will 'draw') and panels (which will contain buttons)</p><p>[[img/canvas-panels.jpg]]</p><p>If you'd like to extend the already instantiated editor you have to check <ahref="API-Reference">API Reference</a>. Check also <ahref="./Creating-plugins">how to create plugins</a> using the same API.
</code></pre></div><p>In just few lines, with the default configurations, you're already able to see something with which play around.</p><p>[[img/default-gjs.jpg]]</p><p>You'll see components commands on top left position that come handy to create and manage your blocks, below there are options which need to highlight and export them. When you select components ('mouse pointer' icon), on the right side, you should see pop up Class Manager and Style Manager options which allow to customize the style of the components. There is also a Layer Manager/Navigator ('hamburger' icon) which helps to manage easily the structure.</p><p>Of course all those stuff (panels, buttons, commands, etc.) are set just as default so you can overwrite them and add more other. Before you start to create things you should know that GrapesJS UI is composed basically by a canvas (where you will 'draw') and panels (which will contain buttons)</p><p>[[img/canvas-panels.jpg]]</p><p>If you'd like to extend the already instantiated editor you have to check <ahref="API-Reference">API Reference</a>. Check also <ahref="./Creating-plugins">how to create plugins</a> using the same API.
In this guide we'll focus on how to initialize the editor with all custom UI from scratch.</p><p>Let's start the editor with some basic toolbar panel</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
In this guide we'll focus on how to initialize the editor with all custom UI from scratch.</p><p>Let's start the editor with some basic toolbar panel</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>In this example we set a panel with 'commands' as an id and after the render we'll see nothing more than an empty div added to our panels. The new panel is already styled as the id 'commands' is one of the default but you can use whatever you like and place it wherever you want with CSS. With refresh we might see something like shown in the image below, with the new panel on the left:</p><p>[[img/new-panel.png]]</p><blockquote><p>Check <ahref="API-Editor">Editor API Reference</a> for more details about editor configurations</p></blockquote><p>Now let's put some button inside</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>In this example we set a panel with 'commands' as an id and after the render we'll see nothing more than an empty div added to our panels. The new panel is already styled as the id 'commands' is one of the default but you can use whatever you like and place it wherever you want with CSS. With refresh we might see something like shown in the image below, with the new panel on the left:</p><p>[[img/new-panel.png]]</p><blockquote><p>Check <ahref="API-Editor">Editor API Reference</a> for more details about editor configurations</p></blockquote><p>Now let's put some button inside</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>On refresh the page might present some changes ('fa fa-smile-o' are from FontAwesome set, so be sure to have placed correctly the font directory)</p><p>[[img/new-btn.png]]</p><p>Yeah, the button is pretty nice and happy, but useless without any command assigned, if you click on it nothing gonna happen.</p><blockquote><p>Check <ahref="API-Panels">Panels API Reference</a> for more details about Panels and Buttons</p></blockquote><p>Assigning commands is pretty easy, but before you should define one or use one of defaults (<ahref="./Built-in-commands">Built-in commands</a>). So in this case we gonna create a new one.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>On refresh the page might present some changes ('fa fa-smile-o' are from FontAwesome set, so be sure to have placed correctly the font directory)</p><p>[[img/new-btn.png]]</p><p>Yeah, the button is pretty nice and happy, but useless without any command assigned, if you click on it nothing gonna happen.</p><blockquote><p>Check <ahref="API-Panels">Panels API Reference</a> for more details about Panels and Buttons</p></blockquote><p>Assigning commands is pretty easy, but before you should define one or use one of defaults (<ahref="./Built-in-commands">Built-in commands</a>). So in this case we gonna create a new one.</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
@ -100,28 +100,28 @@ In this guide we'll focus on how to initialize the editor with all custom UI fro
<spanclass="token operator">...</span>
<spanclass="token operator">...</span>
</code></pre></div><p>As you see we added a new command <code>helloWorld</code> and used its <code>id</code> as an identifier inside <code>button.command</code>. In addition to this we've also implemented two required methods, <code>run</code> and <code>stop</code>, to make button execute commands.</p><p>[[img/btn-clicked.png]]</p><blockquote><p>Check <ahref="API-Commands">Commands API Reference</a></p></blockquote><p>Check the <ahref="http://grapesjs.com/demo.html"target="_blank"rel="noopener noreferrer">demo<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a> for more complete usage of panels, buttons and built-in commands.</p><h2id="components"><ahref="#components"class="header-anchor">#</a> Components</h2><p>Components are elements inside the canvas, which can be drawn by commands or injected directly via configurations. In simple terms components represent the structure of our HTML document. You can init the editor with passing components as an HTML string</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>As you see we added a new command <code>helloWorld</code> and used its <code>id</code> as an identifier inside <code>button.command</code>. In addition to this we've also implemented two required methods, <code>run</code> and <code>stop</code>, to make button execute commands.</p><p>[[img/btn-clicked.png]]</p><blockquote><p>Check <ahref="API-Commands">Commands API Reference</a></p></blockquote><p>Check the <ahref="http://grapesjs.com/demo.html"target="_blank"rel="noopener noreferrer">demo<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a> for more complete usage of panels, buttons and built-in commands.</p><h2id="components"><ahref="#components"class="header-anchor">#</a> Components</h2><p>Components are elements inside the canvas, which can be drawn by commands or injected directly via configurations. In simple terms components represent the structure of our HTML document. You can init the editor with passing components as an HTML string</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
<spanclass="token comment">// Disable default local storage in case you've already used GrapesJS</span>
<spanclass="token comment">// Disable default local storage in case you've already used GrapesJS</span>
</code></pre></div><p>We added 3 simple components with some basic style. If you refresh probably you'll see the same empty page but are actually there, you only need to highlight them.
</code></pre></div><p>We added 3 simple components with some basic style. If you refresh probably you'll see the same empty page but are actually there, you only need to highlight them.
For this purpose already exists a command, so add it to your panel in this way</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
For this purpose already exists a command, so add it to your panel in this way</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
context <spanclass="token operator">:</span><spanclass="token string">'some-random-context'</span><spanclass="token punctuation">,</span><spanclass="token comment">// For grouping context of buttons in the same panel</span>
<spanclass="token literal-property property">context</span><spanclass="token operator">:</span><spanclass="token string">'some-random-context'</span><spanclass="token punctuation">,</span><spanclass="token comment">// For grouping context of buttons in the same panel</span>
active <spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span>
@ -129,146 +129,146 @@ For this purpose already exists a command, so add it to your panel in this way</
<spanclass="token operator">...</span>
<spanclass="token operator">...</span>
</code></pre></div><p>Worth noting the use of <code>context</code> option (try to click 'smile' command without it) and <code>active</code> to enable it after the render.
</code></pre></div><p>Worth noting the use of <code>context</code> option (try to click 'smile' command without it) and <code>active</code> to enable it after the render.
Now you should be able to see blocks inside canvas.</p><p>[[img/blocks3.jpg]]</p><p>You could add other commands to enable interactions with blocks. Check <ahref="./Built-in-commands">Built-in commands</a> to get more information</p><blockquote><p>Check <ahref="API-Components">Components API Reference</a></p></blockquote><h2id="style-manager"><ahref="#style-manager"class="header-anchor">#</a> Style Manager</h2><p>Any HTML structure requires, at some point, a proper style, so to meet this need the Style Manager was added as a built-in feature in GrapesJS. Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a <code>Dimension</code> sector for <code>width</code> and <code>height</code>, and another one as <code>Typography</code> for <code>font-size</code> and <code>color</code>. So it's up to you decide how organize sectors.</p><p>To enable this module we rely on a built-in command <code>open-sm</code>, which shows up the Style Manager, which we gonna bind to another button in a separate panel</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
Now you should be able to see blocks inside canvas.</p><p>[[img/blocks3.jpg]]</p><p>You could add other commands to enable interactions with blocks. Check <ahref="./Built-in-commands">Built-in commands</a> to get more information</p><blockquote><p>Check <ahref="API-Components">Components API Reference</a></p></blockquote><h2id="style-manager"><ahref="#style-manager"class="header-anchor">#</a> Style Manager</h2><p>Any HTML structure requires, at some point, a proper style, so to meet this need the Style Manager was added as a built-in feature in GrapesJS. Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a <code>Dimension</code> sector for <code>width</code> and <code>height</code>, and another one as <code>Typography</code> for <code>font-size</code> and <code>color</code>. So it's up to you decide how organize sectors.</p><p>To enable this module we rely on a built-in command <code>open-sm</code>, which shows up the Style Manager, which we gonna bind to another button in a separate panel</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>After this you'll be able to see something like in the image below</p><p>[[img/enabled-sm.jpg]]</p><p>As you can see Style Manager is enabled but before using it you have to select an element in the canvas, for this purpose we can add another button with a built-in command <code>select-comp</code> in this way</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>After this you'll be able to see something like in the image below</p><p>[[img/enabled-sm.jpg]]</p><p>As you can see Style Manager is enabled but before using it you have to select an element in the canvas, for this purpose we can add another button with a built-in command <code>select-comp</code> in this way</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>Selecting one of the component will show up the Style Manager with default sectors, properties and an input where you can manage classes. The default class you see (cXX) was generated by extracting style from the component</p><p>[[img/default-sm.jpg]]</p><p>As we exploring different configurations inside GrapesJS we gonna overwrite all the default sectors to create some custom one</p><p>Let's put a few sectors with use of <code>buildProps</code> which helps us building common properties</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>Selecting one of the component will show up the Style Manager with default sectors, properties and an input where you can manage classes. The default class you see (cXX) was generated by extracting style from the component</p><p>[[img/default-sm.jpg]]</p><p>As we exploring different configurations inside GrapesJS we gonna overwrite all the default sectors to create some custom one</p><p>Let's put a few sectors with use of <code>buildProps</code> which helps us building common properties</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>Now you should be able to style components</p><p>[[img/style-comp.jpg]]</p><p>You can check the list of usable properties inside <code>buildProps</code> here: <ahref="./Built-in-properties">Built-in properties</a>
</code></pre></div><p>Now you should be able to style components</p><p>[[img/style-comp.jpg]]</p><p>You can check the list of usable properties inside <code>buildProps</code> here: <ahref="./Built-in-properties">Built-in properties</a>
otherwise is possible to build them on your own, let's see how we'd have done the previous configuration without the <code>buildProps</code> helper</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
otherwise is possible to build them on your own, let's see how we'd have done the previous configuration without the <code>buildProps</code> helper</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>As you can see using <code>buildProps</code> actually will save you a lot of work. You could also mix this techniques to obtain custom properties in less time. For example, let's see how can we setup the same width but with a different value of <code>min</code>:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>As you can see using <code>buildProps</code> actually will save you a lot of work. You could also mix this techniques to obtain custom properties in less time. For example, let's see how can we setup the same width but with a different value of <code>min</code>:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
property<spanclass="token operator">:</span><spanclass="token string">'width'</span><spanclass="token punctuation">,</span><spanclass="token comment">// Use 'property' as id</span>
<spanclass="token literal-property property">property</span><spanclass="token operator">:</span><spanclass="token string">'width'</span><spanclass="token punctuation">,</span><spanclass="token comment">// Use 'property' as id</span>
</code></pre></div><blockquote><p>Check <ahref="API-Style-Manager">Style Manager API Reference</a></p></blockquote><h2id="store-load-data"><ahref="#store-load-data"class="header-anchor">#</a> Store/load data</h2><p>In this last part we're gonna see how to store and load template data inside GrapesJS. You may already noticed that even if you refresh the page after changes on canvas your data are not lost and this because GrapesJS comes with some built-in storage implementation.
</code></pre></div><blockquote><p>Check <ahref="API-Style-Manager">Style Manager API Reference</a></p></blockquote><h2id="store-load-data"><ahref="#store-load-data"class="header-anchor">#</a> Store/load data</h2><p>In this last part we're gonna see how to store and load template data inside GrapesJS. You may already noticed that even if you refresh the page after changes on canvas your data are not lost and this because GrapesJS comes with some built-in storage implementation.
The default one is the localStorage which is pretty simple and all the data are stored locally on your computer. Let's see the options available for this storage</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
The default one is the localStorage which is pretty simple and all the data are stored locally on your computer. Let's see the options available for this storage</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
id<spanclass="token operator">:</span><spanclass="token string">'gjs-'</span><spanclass="token punctuation">,</span><spanclass="token comment">// Prefix identifier that will be used inside storing and loading</span>
<spanclass="token literal-property property">id</span><spanclass="token operator">:</span><spanclass="token string">'gjs-'</span><spanclass="token punctuation">,</span><spanclass="token comment">// Prefix identifier that will be used inside storing and loading</span>
type<spanclass="token operator">:</span><spanclass="token string">'local'</span><spanclass="token punctuation">,</span><spanclass="token comment">// Type of the storage</span>
<spanclass="token literal-property property">type</span><spanclass="token operator">:</span><spanclass="token string">'local'</span><spanclass="token punctuation">,</span><spanclass="token comment">// Type of the storage</span>
autosave<spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Store data automatically</span>
<spanclass="token literal-property property">autosave</span><spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Store data automatically</span>
autoload<spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Autoload stored data on init</span>
<spanclass="token literal-property property">autoload</span><spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Autoload stored data on init</span>
stepsBeforeSave<spanclass="token operator">:</span><spanclass="token number">1</span><spanclass="token punctuation">,</span><spanclass="token comment">// If autosave enabled, indicates how many changes are necessary before store method is triggered</span>
<spanclass="token literal-property property">stepsBeforeSave</span><spanclass="token operator">:</span><spanclass="token number">1</span><spanclass="token punctuation">,</span><spanclass="token comment">// If autosave enabled, indicates how many changes are necessary before store method is triggered</span>
storeComponents<spanclass="token operator">:</span><spanclass="token boolean">false</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of components in JSON format</span>
<spanclass="token literal-property property">storeComponents</span><spanclass="token operator">:</span><spanclass="token boolean">false</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of components in JSON format</span>
storeStyles<spanclass="token operator">:</span><spanclass="token boolean">false</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of rules/style in JSON format</span>
<spanclass="token literal-property property">storeStyles</span><spanclass="token operator">:</span><spanclass="token boolean">false</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of rules/style in JSON format</span>
storeHtml<spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of components as HTML string</span>
<spanclass="token literal-property property">storeHtml</span><spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of components as HTML string</span>
storeCss<spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of rules/style as CSS string</span>
<spanclass="token literal-property property">storeCss</span><spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of rules/style as CSS string</span>
</code></pre></div><p>Worth noting the defaut <code>id</code> parameter which adds a prefix for all keys to store. If you check the localStorage inside your DOM panel you'll see something like <code>{ 'gjs-components': '<div>....' ...}</code> in this way it prevents the risk of collisions, quite common with localStorage use in large applications.</p><p>Storing data locally it's easy and fast but useless in some common cases. In the next example we'll see how to setup a remote storage, which is not far from the previous one</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>Worth noting the defaut <code>id</code> parameter which adds a prefix for all keys to store. If you check the localStorage inside your DOM panel you'll see something like <code>{ 'gjs-components': '<div>....' ...}</code> in this way it prevents the risk of collisions, quite common with localStorage use in large applications.</p><p>Storing data locally it's easy and fast but useless in some common cases. In the next example we'll see how to setup a remote storage, which is not far from the previous one</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>As you can see we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.</p><p>If you prefer you could also disable autosaving and do it by yourself using some custom command in this way:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>As you can see we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.</p><p>If you prefer you could also disable autosaving and do it by yourself using some custom command in this way:</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><h3id="addlayer"><ahref="#addlayer"class="header-anchor">#</a> addLayer</h3><p>Add new layer to the stack.</p><h4id="parameters-5"><ahref="#parameters-5"class="header-anchor">#</a> Parameters</h4><ul><li><p><code>props</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Custom property values to use in a new layer. (optional, default <code>{}</code>)</p></li><li><p><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Options (optional, default <code>{}</code>)</p><ul><li><code>opts.at</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number"target="_blank"rel="noopener noreferrer">Number<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>?</strong> Position index (by default the layer will be appended at the end).</li></ul></li></ul><h4id="examples-5"><ahref="#examples-5"class="header-anchor">#</a> Examples</h4><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Add new layer at the beginning of the stack with custom values</span>
</code></pre></div><h3id="addlayer"><ahref="#addlayer"class="header-anchor">#</a> addLayer</h3><p>Add new layer to the stack.</p><h4id="parameters-5"><ahref="#parameters-5"class="header-anchor">#</a> Parameters</h4><ul><li><p><code>props</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Custom property values to use in a new layer. (optional, default <code>{}</code>)</p></li><li><p><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a></strong> Options (optional, default <code>{}</code>)</p><ul><li><code>opts.at</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number"target="_blank"rel="noopener noreferrer">Number<span><svgxmlns="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"><pathfill="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><polygonfill="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><spanclass="sr-only">(opens new window)</span></span></a>?</strong> Position index (by default the layer will be appended at the end).</li></ul></li></ul><h4id="examples-5"><ahref="#examples-5"class="header-anchor">#</a> Examples</h4><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Add new layer at the beginning of the stack with custom values</span>
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{386:function(e,t,a){},423:function(e,t,a){"use strict";a(386)},491:function(e,t,a){"use strict";a.r(t);a(84),a(39),a(7),a(116),a(117);varo={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.activateCodeTab(e)}},mounted:function(){this.loadTabs()},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e},loadTabs:function(){vare=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){returnBoolean(e.componentOptions)})).map((function(t,a){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=a),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab:function(e){this.codeTabs.forEach((function(e){e.elm&&e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},n=(a(423),a(56)),c=Object(n.a)(o,(function(){vare=this,t=e.$createElement,a=e._self._c||t;returna("ClientOnly",[a("div",{staticClass:"theme-code-group"},[a("div",{staticClass:"theme-code-group__nav"},[a("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,o){returna("li",{key:t.title,staticClass:"theme-code-group__li"},[a("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){returne.changeCodeTab(o)}}},[e._v("\n "+e._s(t.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?a("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{344:function(e,t,a){},382:function(e,t,a){"use strict";a(344)},450:function(e,t,a){"use strict";a.r(t);a(66),a(27),a(95),a(96);varo={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.activateCodeTab(e)}},mounted:function(){this.loadTabs()},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e},loadTabs:function(){vare=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){returnBoolean(e.componentOptions)})).map((function(t,a){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=a),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab:function(e){this.codeTabs.forEach((function(e){e.elm&&e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},n=(a(382),a(44)),c=Object(n.a)(o,(function(){vare=this,t=e.$createElement,a=e._self._c||t;returna("ClientOnly",[a("div",{staticClass:"theme-code-group"},[a("div",{staticClass:"theme-code-group__nav"},[a("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,o){returna("li",{key:t.title,staticClass:"theme-code-group__li"},[a("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){returne.changeCodeTab(o)}}},[e._v("\n "+e._s(t.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?a("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{439:function(t,e,s){"use strict";s.r(e);varn=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){returnn[Math.floor(Math.random()*n.length)]}}},i=s(44),h=Object(i.a)(o,(function(){vart=this.$createElement,e=this._self._c||t;returne("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{480:function(t,e,s){"use strict";s.r(e);varn=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){returnn[Math.floor(Math.random()*n.length)]}}},i=s(56),h=Object(i.a)(o,(function(){vart=this.$createElement,e=this._self._c||t;returne("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n Take me home.\n ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{470:function(t,e,s){"use strict";s.r(e);vara=s(44),o=Object(a.a)({},(function(){vart=this.$createElement,e=this._self._c||t;returne("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{497:function(t,e,s){"use strict";s.r(e);vara=s(56),o=Object(a.a)({},(function(){vart=this.$createElement,e=this._self._c||t;returne("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{468:function(e,r,t){"use strict";t.r(r);varo=t(44),i=Object(o.a)({},(function(){vare=this,r=e.$createElement,t=e._self._c||r;returnt("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"device"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#device"}},[e._v("#")]),e._v(" Device")]),e._v(" "),t("h3",{attrs:{id:"properties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),t("ul",[t("li",[t("code",[e._v("name")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Device type, eg. "),t("code",[e._v("Mobile")])]),e._v(" "),t("li",[t("code",[e._v("width")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Width to set for the editor iframe, eg. '900px'")]),e._v(" "),t("li",[t("code",[e._v("height")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Height to set for the editor iframe, eg. '600px'")]),e._v(" "),t("li",[t("code",[e._v("widthMedia")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" The width which will be used in media queries, If empty the width will be used")]),e._v(" "),t("li",[t("code",[e._v("priority")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),t("OutboundLink")],1),e._v("?")]),e._v(" Setup the order of media queries")])])])}),[],!1,null,null,null);r.default=i.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{509:function(e,r,t){"use strict";t.r(r);varo=t(56),i=Object(o.a)({},(function(){vare=this,r=e.$createElement,t=e._self._c||r;returnt("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"device"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#device"}},[e._v("#")]),e._v(" Device")]),e._v(" "),t("h3",{attrs:{id:"properties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),t("ul",[t("li",[t("code",[e._v("name")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Device type, eg. "),t("code",[e._v("Mobile")])]),e._v(" "),t("li",[t("code",[e._v("width")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Width to set for the editor iframe, eg. '900px'")]),e._v(" "),t("li",[t("code",[e._v("height")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Height to set for the editor iframe, eg. '600px'")]),e._v(" "),t("li",[t("code",[e._v("widthMedia")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" The width which will be used in media queries, If empty the width will be used")]),e._v(" "),t("li",[t("code",[e._v("priority")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),t("OutboundLink")],1),e._v("?")]),e._v(" Setup the order of media queries")])])])}),[],!1,null,null,null);r.default=i.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{467:function(e,r,t){"use strict";t.r(r);varo=t(44),a=Object(o.a)({},(function(){vare=this,r=e.$createElement,t=e._self._c||r;returnt("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"frame"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#frame"}},[e._v("#")]),e._v(" Frame")]),e._v(" "),t("h3",{attrs:{id:"properties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),t("ul",[t("li",[t("code",[e._v("component")]),e._v(" "),t("strong",[e._v("("),t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),t("OutboundLink")],1),e._v(" | "),t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v(")")]),e._v(" Wrapper component definition. You can also pass an HTML string as components of the default wrapper component.")]),e._v(" "),t("li",[t("code",[e._v("width")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Width of the frame. By default, the canvas width will be taken.")]),e._v(" "),t("li",[t("code",[e._v("height")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Height of the frame. By default, the canvas height will be taken.")]),e._v(" "),t("li",[t("code",[e._v("x")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),t("OutboundLink")],1),e._v("?")]),e._v(" Horizontal position of the frame in the canvas.")]),e._v(" "),t("li",[t("code",[e._v("y")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),t("OutboundLink")],1),e._v("?")]),e._v(" Vertical position of the frame in the canvas.")])])])}),[],!1,null,null,null);r.default=a.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{511:function(e,r,t){"use strict";t.r(r);varo=t(56),a=Object(o.a)({},(function(){vare=this,r=e.$createElement,t=e._self._c||r;returnt("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"frame"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#frame"}},[e._v("#")]),e._v(" Frame")]),e._v(" "),t("h3",{attrs:{id:"properties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),t("ul",[t("li",[t("code",[e._v("component")]),e._v(" "),t("strong",[e._v("("),t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),t("OutboundLink")],1),e._v(" | "),t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v(")")]),e._v(" Wrapper component definition. You can also pass an HTML string as components of the default wrapper component.")]),e._v(" "),t("li",[t("code",[e._v("width")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Width of the frame. By default, the canvas width will be taken.")]),e._v(" "),t("li",[t("code",[e._v("height")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Height of the frame. By default, the canvas height will be taken.")]),e._v(" "),t("li",[t("code",[e._v("x")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),t("OutboundLink")],1),e._v("?")]),e._v(" Horizontal position of the frame in the canvas.")]),e._v(" "),t("li",[t("code",[e._v("y")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),t("OutboundLink")],1),e._v("?")]),e._v(" Vertical position of the frame in the canvas.")])])])}),[],!1,null,null,null);r.default=a.exports}}]);
Artur Arseniev
4 years ago