<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>Looks like we've got some broken links.</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<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">
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/I18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Traits</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></div></li><li><divclass="sidebar-group"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></div></li></ul></div><divclass="page"><divclass="content"><h1id="getting-started"><ahref="#getting-started"aria-hidden="true"class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/"class="sidebar-link">Introduction</a></li><li><ahref="/docs/getting-started.html"class="sidebar-link">Getting Started</a></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Modules</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/modules/Assets.html"class="sidebar-link">Assets</a></li><li><ahref="/docs/modules/Blocks.html"class="sidebar-link">Blocks</a></li><li><ahref="/docs/modules/Commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/modules/Components.html"class="sidebar-link">Components</a></li><li><ahref="/docs/modules/Components-js.html"class="sidebar-link">Components & JS</a></li><li><ahref="/docs/modules/I18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/modules/Traits.html"class="sidebar-link">Traits</a></li><li><ahref="/docs/modules/Style-manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/modules/Storage.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/modules/Plugins.html"class="sidebar-link">Plugins</a></li></ul></section></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Guides</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/docs/guides/Replace-Rich-Text-Editor.html"class="sidebar-link">Replace Rich Text Editor</a></li><li><ahref="/docs/guides/Custom-CSS-parser.html"class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="getting-started"><ahref="#getting-started"class="header-anchor">#</a> Getting started</h1><p>This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.</p><p>The pretty minimalistic way to instantiate the editor could be like this:</p><divclass="language-html extra-class"><preclass="language-html"><code><spanclass="token tag"><spanclass="token tag"><spanclass="token punctuation"><</span>link</span><spanclass="token attr-name">rel</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>stylesheet<spanclass="token punctuation">"</span></span><spanclass="token attr-name">href</span><spanclass="token attr-value"><spanclass="token punctuation">=</span><spanclass="token punctuation">"</span>path/to/grapes.min.css<spanclass="token punctuation">"</span></span><spanclass="token punctuation">></span></span>
</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>
</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>
</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>
</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<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> for more complete usage of panels, buttons and built-in commands.</p><h2id="components"><ahref="#components"aria-hidden="true"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<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></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>
</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 punctuation">:</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 punctuation">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span>
id <spanclass="token operator">:</span><spanclass="token string">'vis'</span><spanclass="token punctuation">,</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>
active <spanclass="token operator">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</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.
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"aria-hidden="true"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>
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>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>
</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 punctuation">:</span><spanclass="token string">'width'</span><spanclass="token punctuation">,</span><spanclass="token comment">// Use 'property' as id</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>
</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"aria-hidden="true"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>
</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>
id<spanclass="token punctuation">:</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 punctuation">:</span><spanclass="token string">'local'</span><spanclass="token punctuation">,</span><spanclass="token comment">// Type of the storage</span>
autosave<spanclass="token punctuation">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Store data automatically</span>
autoload<spanclass="token punctuation">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Autoload stored data on init</span>
stepsBeforeSave<spanclass="token punctuation">:</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 punctuation">:</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 punctuation">:</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 punctuation">:</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 punctuation">:</span><spanclass="token boolean">true</span><spanclass="token punctuation">,</span><spanclass="token comment">// Enable/Disable storing of rules/style as CSS string</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>
type<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>
autoload<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>
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>
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>
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>
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>
</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><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> blockManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">;</span>
<ul><li><code>opts.label</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Name of the block</li><li><code>opts.content</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> HTML content</li><li><code>opts.category</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>)</strong> Group the block inside a catgegory.
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> blockManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>BlockManager<spanclass="token punctuation">;</span>
content<spanclass="token punctuation">:</span><spanclass="token string">'<h1>Put your title here</h1>'</span><spanclass="token punctuation">,</span>
content<spanclass="token operator">:</span><spanclass="token string">'<h1>Put your title here</h1>'</span><spanclass="token punctuation">,</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> commands <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Commands<spanclass="token punctuation">;</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> commands <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Commands<spanclass="token punctuation">;</span>
By passing just a function it's intended as a stateless command
(just like passing an object with only <code>run</code> method).</li></ul><h3id="examples"><ahref="#examples"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>commands<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'myCommand'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
(just like passing an object with only <code>run</code> method).</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>commands<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'myCommand'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2id="stop"><ahref="#stop"aria-hidden="true"class="header-anchor">#</a> stop</h2><p>Stop the command</p><h3id="parameters-6"><ahref="#parameters-6"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Command ID</li><li><code>options</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Options (optional, default <code>{}</code>)</li></ul><h3id="examples-5"><ahref="#examples-5"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>commands<spanclass="token punctuation">.</span><spanclass="token function">stop</span><spanclass="token punctuation">(</span><spanclass="token string">'myCommand'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span> someOption<spanclass="token punctuation">:</span><spanclass="token number">1</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2id="isactive"><ahref="#isactive"aria-hidden="true"class="header-anchor">#</a> isActive</h2><p>Check if the command is active. You activate commands with <code>run</code>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2id="stop"><ahref="#stop"class="header-anchor">#</a> stop</h2><p>Stop the command</p><h3id="parameters-6"><ahref="#parameters-6"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Command ID</li><li><code>options</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Options (optional, default <code>{}</code>)</li></ul><h3id="examples-5"><ahref="#examples-5"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>commands<spanclass="token punctuation">.</span><spanclass="token function">stop</span><spanclass="token punctuation">(</span><spanclass="token string">'myCommand'</span><spanclass="token punctuation">,</span><spanclass="token punctuation">{</span> someOption<spanclass="token operator">:</span><spanclass="token number">1</span><spanclass="token punctuation">}</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p><h2id="isactive"><ahref="#isactive"class="header-anchor">#</a> isActive</h2><p>Check if the command is active. You activate commands with <code>run</code>
and disable them with <code>stop</code>. If the command was created without <code>stop</code>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> deviceManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>DeviceManager<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#add">add</a></li><li><ahref="#get">get</a></li><li><ahref="#getAll">getAll</a></li></ul><h2id="add"><ahref="#add"aria-hidden="true"class="header-anchor">#</a> add</h2><p>Add new device to the collection. URLs are supposed to be unique</p><h3id="parameters"><ahref="#parameters"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Device id</li><li><code>width</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Width of the device</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>?</strong> Custom options (optional, default <code>{}</code>)</li></ul><h3id="examples"><ahref="#examples"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>deviceManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'tablet'</span><spanclass="token punctuation">,</span><spanclass="token string">'900px'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> deviceManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>DeviceManager<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#add">add</a></li><li><ahref="#get">get</a></li><li><ahref="#getAll">getAll</a></li></ul><h2id="add"><ahref="#add"class="header-anchor">#</a> add</h2><p>Add new device to the collection. URLs are supposed to be unique</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Device id</li><li><code>width</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Width of the device</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>?</strong> Custom options (optional, default <code>{}</code>)</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>deviceManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'tablet'</span><spanclass="token punctuation">,</span><spanclass="token string">'900px'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
widthMedia<spanclass="token punctuation">:</span><spanclass="token string">'810px'</span><spanclass="token punctuation">,</span><spanclass="token comment">// the width that will be used for the CSS media</span>
widthMedia<spanclass="token operator">:</span><spanclass="token string">'810px'</span><spanclass="token punctuation">,</span><spanclass="token comment">// the width that will be used for the CSS media</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> i18n <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>I18n<spanclass="token punctuation">;</span>
</code></pre></div><h3id="events"><ahref="#events"aria-hidden="true"class="header-anchor">#</a> Events</h3><ul><li><code>i18n:add</code> - New set of messages is added</li><li><code>i18n:update</code> - The set of messages is updated</li><li><code>i18n:locale</code> - Locale changed</li></ul><h2id="getconfig"><ahref="#getconfig"aria-hidden="true"class="header-anchor">#</a> getConfig</h2><p>Get module configurations</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Configuration object</p><h2id="setlocale"><ahref="#setlocale"aria-hidden="true"class="header-anchor">#</a> setLocale</h2><p>Update current locale</p><h3id="parameters"><ahref="#parameters"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>locale</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Locale value</li></ul><h3id="examples"><ahref="#examples"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>i18n<spanclass="token punctuation">.</span><spanclass="token function">setLocale</span><spanclass="token punctuation">(</span><spanclass="token string">'it'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getlocale"><ahref="#getlocale"aria-hidden="true"class="header-anchor">#</a> getLocale</h2><p>Get current locale</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Current locale value</p><h2id="getmessages"><ahref="#getmessages"aria-hidden="true"class="header-anchor">#</a> getMessages</h2><p>Get all messages</p><h3id="parameters-2"><ahref="#parameters-2"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>lang</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>?</strong> Specify the language of messages to return</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>?</strong> Options (optional, default <code>{}</code>)
<ul><li><code>opts.debug</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>?</strong> Show warnings in case of missing language</li></ul></li></ul><h3id="examples-2"><ahref="#examples-2"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>i18n<spanclass="token punctuation">.</span><spanclass="token function">getMessages</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> i18n <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>I18n<spanclass="token punctuation">;</span>
</code></pre></div><h3id="events"><ahref="#events"class="header-anchor">#</a> Events</h3><ul><li><code>i18n:add</code> - New set of messages is added</li><li><code>i18n:update</code> - The set of messages is updated</li><li><code>i18n:locale</code> - Locale changed</li></ul><h2id="getconfig"><ahref="#getconfig"class="header-anchor">#</a> getConfig</h2><p>Get module configurations</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Configuration object</p><h2id="setlocale"><ahref="#setlocale"class="header-anchor">#</a> setLocale</h2><p>Update current locale</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>locale</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Locale value</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>i18n<spanclass="token punctuation">.</span><spanclass="token function">setLocale</span><spanclass="token punctuation">(</span><spanclass="token string">'it'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getlocale"><ahref="#getlocale"class="header-anchor">#</a> getLocale</h2><p>Get current locale</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Current locale value</p><h2id="getmessages"><ahref="#getmessages"class="header-anchor">#</a> getMessages</h2><p>Get all messages</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>lang</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>?</strong> Specify the language of messages to return</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>?</strong> Options (optional, default <code>{}</code>)
<ul><li><code>opts.debug</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>?</strong> Show warnings in case of missing language</li></ul></li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>i18n<spanclass="token punctuation">.</span><spanclass="token function">getMessages</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="active sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></div><divclass="page"><divclass="content"><h1id="api-reference"><ahref="#api-reference"aria-hidden="true"class="header-anchor">#</a> API Reference</h1><p>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 <ahref="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">7/9/2018, 1:03:59 AM</span></div></div><divclass="page-nav"><pclass="inner"><!----><spanclass="next"><ahref="/docs/api/editor.html">
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="active sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="api-reference"><ahref="#api-reference"class="header-anchor">#</a> API Reference</h1><p>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 <ahref="/docs/modules/Plugins.html">create a plugin</a> and make those extensions reusable and available to others.</p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/README.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">7/9/2018, 1:03:59 AM</span></div></footer><divclass="page-nav"><pclass="inner"><!----><spanclass="next"><ahref="/docs/api/editor.html">
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> keymaps <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Keymaps<spanclass="token punctuation">;</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> keymaps <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Keymaps<spanclass="token punctuation">;</span>
or just a command id as a string</p><h2id="get"><ahref="#get"aria-hidden="true"class="header-anchor">#</a> get</h2><p>Get the keymap by id</p><h3id="parameters-2"><ahref="#parameters-2"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Keymap id</li></ul><h3id="examples-2"><ahref="#examples-2"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>keymaps<spanclass="token punctuation">.</span><spanclass="token function">get</span><spanclass="token punctuation">(</span><spanclass="token string">'ns:my-keymap'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
or just a command id as a string</p><h2id="get"><ahref="#get"class="header-anchor">#</a> get</h2><p>Get the keymap by id</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Keymap id</li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>keymaps<spanclass="token punctuation">.</span><spanclass="token function">get</span><spanclass="token punctuation">(</span><spanclass="token string">'ns:my-keymap'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> modal <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Modal<spanclass="token punctuation">;</span>
<ul><li><code>opts.title</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>)?</strong> Title to set for the modal</li><li><code>opts.content</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>)?</strong> Content to set for the modal</li></ul></li></ul><p>Returns <strong>this</strong></p><h2id="close"><ahref="#close"aria-hidden="true"class="header-anchor">#</a> close</h2><p>Close the modal window</p><p>Returns <strong>this</strong></p><h2id="onceclose"><ahref="#onceclose"aria-hidden="true"class="header-anchor">#</a> onceClose</h2><p>Execute callback when the modal will be closed.
The callback will be called one only time</p><h3id="parameters-2"><ahref="#parameters-2"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></li></ul><p>Returns <strong>this</strong></p><h2id="onceopen"><ahref="#onceopen"aria-hidden="true"class="header-anchor">#</a> onceOpen</h2><p>Execute callback when the modal will be opened.
The callback will be called one only time</p><h3id="parameters-3"><ahref="#parameters-3"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></li></ul><p>Returns <strong>this</strong></p><h2id="isopen"><ahref="#isopen"aria-hidden="true"class="header-anchor">#</a> isOpen</h2><p>Checks if the modal window is open</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="settitle"><ahref="#settitle"aria-hidden="true"class="header-anchor">#</a> setTitle</h2><p>Set the title to the modal window</p><h3id="parameters-4"><ahref="#parameters-4"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>title</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Title</li></ul><h3id="examples"><ahref="#examples"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>modal<spanclass="token punctuation">.</span><spanclass="token function">setTitle</span><spanclass="token punctuation">(</span><spanclass="token string">'New title'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="gettitle"><ahref="#gettitle"aria-hidden="true"class="header-anchor">#</a> getTitle</h2><p>Returns the title of the modal window</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="setcontent"><ahref="#setcontent"aria-hidden="true"class="header-anchor">#</a> setContent</h2><p>Set the content of the modal window</p><h3id="parameters-5"><ahref="#parameters-5"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>content</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>)</strong> Content</li></ul><h3id="examples-2"><ahref="#examples-2"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>modal<spanclass="token punctuation">.</span><spanclass="token function">setContent</span><spanclass="token punctuation">(</span><spanclass="token string">'<div>Some HTML content</div>'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getcontent"><ahref="#getcontent"aria-hidden="true"class="header-anchor">#</a> getContent</h2><p>Get the content of the modal window</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/modal_dialog.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">5/2/2019, 1:28:33 AM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> modal <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Modal<spanclass="token punctuation">;</span>
<ul><li><code>opts.title</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>)?</strong> Title to set for the modal</li><li><code>opts.content</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>)?</strong> Content to set for the modal</li></ul></li></ul><p>Returns <strong>this</strong></p><h2id="close"><ahref="#close"class="header-anchor">#</a> close</h2><p>Close the modal window</p><p>Returns <strong>this</strong></p><h2id="onceclose"><ahref="#onceclose"class="header-anchor">#</a> onceClose</h2><p>Execute callback when the modal will be closed.
The callback will be called one only time</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></li></ul><p>Returns <strong>this</strong></p><h2id="onceopen"><ahref="#onceopen"class="header-anchor">#</a> onceOpen</h2><p>Execute callback when the modal will be opened.
The callback will be called one only time</p><h3id="parameters-3"><ahref="#parameters-3"class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></li></ul><p>Returns <strong>this</strong></p><h2id="isopen"><ahref="#isopen"class="header-anchor">#</a> isOpen</h2><p>Checks if the modal window is open</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="settitle"><ahref="#settitle"class="header-anchor">#</a> setTitle</h2><p>Set the title to the modal window</p><h3id="parameters-4"><ahref="#parameters-4"class="header-anchor">#</a> Parameters</h3><ul><li><code>title</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Title</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>modal<spanclass="token punctuation">.</span><spanclass="token function">setTitle</span><spanclass="token punctuation">(</span><spanclass="token string">'New title'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="gettitle"><ahref="#gettitle"class="header-anchor">#</a> getTitle</h2><p>Returns the title of the modal window</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="setcontent"><ahref="#setcontent"class="header-anchor">#</a> setContent</h2><p>Set the content of the modal window</p><h3id="parameters-5"><ahref="#parameters-5"class="header-anchor">#</a> Parameters</h3><ul><li><code>content</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | <ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>)</strong> Content</li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>modal<spanclass="token punctuation">.</span><spanclass="token function">setContent</span><spanclass="token punctuation">(</span><spanclass="token string">'<div>Some HTML content</div>'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getcontent"><ahref="#getcontent"class="header-anchor">#</a> getContent</h2><p>Get the content of the modal window</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/modal_dialog.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">5/2/2019, 1:28:33 AM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> panelManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Panels<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#addpanel">addPanel</a></li><li><ahref="#addbutton">addButton</a></li><li><ahref="#getbutton">getButton</a></li><li><ahref="#getpanel">getPanel</a></li><li><ahref="#getpanels">getPanels</a></li><li><ahref="#getpanelsel">getPanelsEl</a></li><li><ahref="#removepanel">removePanel</a></li><li><ahref="#removebutton">removeButton</a></li></ul><h2id="getpanels"><ahref="#getpanels"aria-hidden="true"class="header-anchor">#</a> getPanels</h2><p>Returns the collection of panels</p><p>Returns <strong>Collection</strong> Collection of panel</p><h2id="getpanelsel"><ahref="#getpanelsel"aria-hidden="true"class="header-anchor">#</a> getPanelsEl</h2><p>Returns panels element</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="addpanel"><ahref="#addpanel"aria-hidden="true"class="header-anchor">#</a> addPanel</h2><p>Add new panel to the collection</p><h3id="parameters"><ahref="#parameters"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>panel</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | Panel)</strong> Object with right properties or an instance of Panel</li></ul><h3id="examples"><ahref="#examples"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">var</span> newPanel <spanclass="token operator">=</span> panelManager<spanclass="token punctuation">.</span><spanclass="token function">addPanel</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> panelManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>Panels<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#addpanel">addPanel</a></li><li><ahref="#addbutton">addButton</a></li><li><ahref="#getbutton">getButton</a></li><li><ahref="#getpanel">getPanel</a></li><li><ahref="#getpanels">getPanels</a></li><li><ahref="#getpanelsel">getPanelsEl</a></li><li><ahref="#removepanel">removePanel</a></li><li><ahref="#removebutton">removeButton</a></li></ul><h2id="getpanels"><ahref="#getpanels"class="header-anchor">#</a> getPanels</h2><p>Returns the collection of panels</p><p>Returns <strong>Collection</strong> Collection of panel</p><h2id="getpanelsel"><ahref="#getpanelsel"class="header-anchor">#</a> getPanelsEl</h2><p>Returns panels element</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="addpanel"><ahref="#addpanel"class="header-anchor">#</a> addPanel</h2><p>Add new panel to the collection</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>panel</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | Panel)</strong> Object with right properties or an instance of Panel</li></ul><h3id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">var</span> newPanel <spanclass="token operator">=</span> panelManager<spanclass="token punctuation">.</span><spanclass="token function">addPanel</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="active sidebar-link">Rich Text Editor</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#richtexteditor"class="sidebar-link">RichTextEditor</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#gettoolbarel"class="sidebar-link">getToolbarEl</a></li></ul></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></div><divclass="page"><divclass="content"><h2id="richtexteditor"><ahref="#richtexteditor"aria-hidden="true"class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand"target="_blank"rel="noopener noreferrer">HTML Editing APIs<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>.
It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="active sidebar-link">Rich Text Editor</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#richtexteditor"class="sidebar-link">RichTextEditor</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/rich_text_editor.html#gettoolbarel"class="sidebar-link">getToolbarEl</a></li></ul></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="richtexteditor"><ahref="#richtexteditor"class="header-anchor">#</a> RichTextEditor</h2><p>This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the <ahref="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand"target="_blank"rel="noopener noreferrer">HTML Editing APIs<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>.
It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> rte <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>RichTextEditor<spanclass="token punctuation">;</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> rte <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>RichTextEditor<spanclass="token punctuation">;</span>
<spanclass="token keyword">if</span><spanclass="token punctuation">(</span>value <spanclass="token operator">!=</span><spanclass="token string">'false'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">{</span><spanclass="token comment">// value is a string</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="active sidebar-link">Selector Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#selectormanager"class="sidebar-link">SelectorManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#addclass"class="sidebar-link">addClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#escapename"class="sidebar-link">escapeName</a></li></ul></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></div><divclass="page"><divclass="content"><h2id="selectormanager"><ahref="#selectormanager"aria-hidden="true"class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
a look at this code:</p><divclass="language-css extra-class"><preclass="language-css"><code><spanclass="token selector">span > #send-btn.btn</span><spanclass="token punctuation">{</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="active sidebar-link">Selector Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#selectormanager"class="sidebar-link">SelectorManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#setstate"class="sidebar-link">setState</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getstate"class="sidebar-link">getState</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#addclass"class="sidebar-link">addClass</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#get"class="sidebar-link">get</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#getall"class="sidebar-link">getAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/selector_manager.html#escapename"class="sidebar-link">escapeName</a></li></ul></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="sidebar-link">Undo Manager</a></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="selectormanager"><ahref="#selectormanager"class="header-anchor">#</a> SelectorManager</h2><p>Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
a look at this code:</p><divclass="language-css extra-class"><preclass="language-css"><code><spanclass="token selector">span > #send-btn.btn</span><spanclass="token punctuation">{</span>
</code></pre></div><p>In this scenario we get:</p><ul><li>span -> selector of type <code>tag</code></li><li>send-btn -> selector of type <code>id</code></li><li>btn -> selector of type <code>class</code></li></ul><p>So, for example, being <code>btn</code> the same class entity it'll be easier to refactor and track things.</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>In this scenario we get:</p><ul><li>span -> selector of type <code>tag</code></li><li>send-btn -> selector of type <code>id</code></li><li>btn -> selector of type <code>class</code></li></ul><p>So, for example, being <code>btn</code> the same class entity it'll be easier to refactor and track things.</p><p>You can customize the initial state of the module from the editor initialization, by passing the following <ahref="https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js"target="_blank"rel="noopener noreferrer">Configuration Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> editor <spanclass="token operator">=</span> grapesjs<spanclass="token punctuation">.</span><spanclass="token function">init</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> selectorManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>SelectorManager<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#getconfig">getConfig</a></li><li><ahref="#add">add</a></li><li><ahref="#addclass">addClass</a></li><li><ahref="#get">get</a></li><li><ahref="#getAll">getAll</a></li></ul><h2id="getconfig"><ahref="#getconfig"aria-hidden="true"class="header-anchor">#</a> getConfig</h2><p>Get configuration object</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="add"><ahref="#add"aria-hidden="true"class="header-anchor">#</a> add</h2><p>Add a new selector to collection if it's not already exists. Class type is a default one</p><h3id="parameters"><ahref="#parameters"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>)</strong> Selector/s name</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Selector options (optional, default <code>{}</code>)
<ul><li><code>opts.label</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Label for the selector, if it's not provided the label will be the same as the name (optional, default <code>''</code>)</li><li><code>opts.type</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Type of the selector. At the moment, only 'class' (1) is available (optional, default <code>1</code>)</li></ul></li></ul><h3id="examples"><ahref="#examples"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">const</span> selector <spanclass="token operator">=</span> selectorManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'selectorName'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> selectorManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>SelectorManager<spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="getstate"><ahref="#getstate"class="header-anchor">#</a> getState</h2><p>Get the current selector state</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="add"><ahref="#add"class="header-anchor">#</a> add</h2><p>Add a new selector to collection if it's not already exists. Class type is a default one</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a> | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a>)</strong> Selector/s name</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Selector options (optional, default <code>{}</code>)
<ul><li><code>opts.label</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Label for the selector, if it's not provided the label will be the same as the name (optional, default <code>''</code>)</li><li><code>opts.type</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong> Type of the selector. At the moment, only 'class' (1) is available (optional, default <code>1</code>)</li></ul></li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">const</span> selector <spanclass="token operator">=</span> selectorManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'selectorName'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="active sidebar-link">Undo Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undomanager"class="sidebar-link">UndoManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#removeall"class="sidebar-link">removeAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#start"class="sidebar-link">start</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#stop"class="sidebar-link">stop</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undo"class="sidebar-link">undo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undoall"class="sidebar-link">undoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redo"class="sidebar-link">redo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redoall"class="sidebar-link">redoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasundo"class="sidebar-link">hasUndo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasredo"class="sidebar-link">hasRedo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstack"class="sidebar-link">getStack</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#clear"class="sidebar-link">clear</a></li></ul></li></ul></div><divclass="page"><divclass="content"><h2id="undomanager"><ahref="#undomanager"aria-hidden="true"class="header-anchor">#</a> UndoManager</h2><p>This module allows to manage the stack of changes applied in canvas.
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> um <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>UndoManager<spanclass="token punctuation">;</span>
<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></nav><divid="native-carbon"class="carbon-ads"></div><ulclass="sidebar-links"><li><ahref="/docs/api/"class="sidebar-link">API Reference</a></li><li><ahref="/docs/api/editor.html"class="sidebar-link">Editor</a></li><li><ahref="/docs/api/i18n.html"class="sidebar-link">I18n</a></li><li><ahref="/docs/api/canvas.html"class="sidebar-link">Canvas</a></li><li><ahref="/docs/api/assets.html"class="sidebar-link">Asset Manager</a></li><li><ahref="/docs/api/block_manager.html"class="sidebar-link">Block Manager</a></li><li><ahref="/docs/api/commands.html"class="sidebar-link">Commands</a></li><li><ahref="/docs/api/components.html"class="sidebar-link">DOM Components</a></li><li><ahref="/docs/api/component.html"class="sidebar-link"> - Component</a></li><li><ahref="/docs/api/panels.html"class="sidebar-link">Panels</a></li><li><ahref="/docs/api/style_manager.html"class="sidebar-link">Style Manager</a></li><li><ahref="/docs/api/storage_manager.html"class="sidebar-link">Storage Manager</a></li><li><ahref="/docs/api/device_manager.html"class="sidebar-link">Device Manager</a></li><li><ahref="/docs/api/selector_manager.html"class="sidebar-link">Selector Manager</a></li><li><ahref="/docs/api/css_composer.html"class="sidebar-link">CSS Composer</a></li><li><ahref="/docs/api/modal_dialog.html"class="sidebar-link">Modal</a></li><li><ahref="/docs/api/rich_text_editor.html"class="sidebar-link">Rich Text Editor</a></li><li><ahref="/docs/api/keymaps.html"class="sidebar-link">Keymaps</a></li><li><ahref="/docs/api/undo_manager.html"class="active sidebar-link">Undo Manager</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undomanager"class="sidebar-link">UndoManager</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getconfig"class="sidebar-link">getConfig</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#add"class="sidebar-link">add</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#remove"class="sidebar-link">remove</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#removeall"class="sidebar-link">removeAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#start"class="sidebar-link">start</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#stop"class="sidebar-link">stop</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undo"class="sidebar-link">undo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#undoall"class="sidebar-link">undoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redo"class="sidebar-link">redo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#redoall"class="sidebar-link">redoAll</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasundo"class="sidebar-link">hasUndo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#hasredo"class="sidebar-link">hasRedo</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstack"class="sidebar-link">getStack</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#getstackgroup"class="sidebar-link">getStackGroup</a></li><liclass="sidebar-sub-header"><ahref="/docs/api/undo_manager.html#clear"class="sidebar-link">clear</a></li></ul></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h2id="undomanager"><ahref="#undomanager"class="header-anchor">#</a> UndoManager</h2><p>This module allows to manage the stack of changes applied in canvas.
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> um <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>UndoManager<spanclass="token punctuation">;</span>
Note: New Components and CSSRules will be added automatically</p><h3id="parameters"><ahref="#parameters"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>entity</code><strong>(Model | Collection)</strong> Entity to track</li></ul><h3id="examples-2"><ahref="#examples-2"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span>someModelOrCollection<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="remove"><ahref="#remove"aria-hidden="true"class="header-anchor">#</a> remove</h2><p>Remove and stop tracking the entity (Model/Collection)</p><h3id="parameters-2"><ahref="#parameters-2"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>entity</code><strong>(Model | Collection)</strong> Entity to remove</li></ul><h3id="examples-3"><ahref="#examples-3"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">remove</span><spanclass="token punctuation">(</span>someModelOrCollection<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="hasundo"><ahref="#hasundo"aria-hidden="true"class="header-anchor">#</a> hasUndo</h2><p>Checks if exists an available undo</p><h3id="examples-11"><ahref="#examples-11"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">hasUndo</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="hasredo"><ahref="#hasredo"aria-hidden="true"class="header-anchor">#</a> hasRedo</h2><p>Checks if exists an available redo</p><h3id="examples-12"><ahref="#examples-12"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">hasRedo</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
Note: New Components and CSSRules will be added automatically</p><h3id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h3><ul><li><code>entity</code><strong>(Model | Collection)</strong> Entity to track</li></ul><h3id="examples-2"><ahref="#examples-2"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span>someModelOrCollection<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="remove"><ahref="#remove"class="header-anchor">#</a> remove</h2><p>Remove and stop tracking the entity (Model/Collection)</p><h3id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h3><ul><li><code>entity</code><strong>(Model | Collection)</strong> Entity to remove</li></ul><h3id="examples-3"><ahref="#examples-3"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">remove</span><spanclass="token punctuation">(</span>someModelOrCollection<spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="hasundo"><ahref="#hasundo"class="header-anchor">#</a> hasUndo</h2><p>Checks if exists an available undo</p><h3id="examples-11"><ahref="#examples-11"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">hasUndo</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="hasredo"><ahref="#hasredo"class="header-anchor">#</a> hasRedo</h2><p>Checks if exists an available redo</p><h3id="examples-12"><ahref="#examples-12"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">hasRedo</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
The difference between <code>getStack</code> is when you do multiple operations at a time,
like appending multiple components:
<code>editor.getWrapper().append(</code></p><div>C1</div><div>C2</div><code>);</code><code>getStack</code> will return a collection length of 2.
<code>getStackGroup</code> instead will group them as a single operation (the first
inserted component will be returned in the list) by returning an array length of 1.<p></p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"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></a></strong></p><h2id="clear"><ahref="#clear"class="header-anchor">#</a> clear</h2><p>Clear the stack</p><h3id="examples-14"><ahref="#examples-14"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>um<spanclass="token punctuation">.</span><spanclass="token function">clear</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{233:function(e,t,a){"use strict";a.r(t);varn=a(1),s=Object(n.a)({},(function(){vare=this.$createElement,t=this._self._c||e;returnt("div",{staticClass:"content"},[this._m(0),t("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 "),t("router-link",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[function(){vare=this.$createElement,t=this._self._c||e;returnt("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" API Reference")])}],!1,null,null,null);t.default=s.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{384: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(33),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([[19],{410:function(t,e,s){"use strict";s.r(e);vara=s(33),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}}]);
Artur Arseniev
7 years ago