<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>There's nothing here.</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>There's nothing here.</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<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/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><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/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>
</code></pre></div><p>In just few lines, with the default configurations, you're already able to see something with which play around.</p><p>[[img/default-gjs.jpg]]</p><p>You'll see components commands on top left position that come handy to create and manage your blocks, below there are options which need to highlight and export them. When you select components ('mouse pointer' icon), on the right side, you should see pop up Class Manager and Style Manager options which allow to customize the style of the components. There is also a Layer Manager/Navigator ('hamburger' icon) which helps to manage easily the structure.</p><p>Of course all those stuff (panels, buttons, commands, etc.) are set just as default so you can overwrite them and add more other. Before you start to create things you should know that GrapesJS UI is composed basically by a canvas (where you will 'draw') and panels (which will contain buttons)</p><p>[[img/canvas-panels.jpg]]</p><p>If you'd like to extend the already instantiated editor you have to check <ahref="API-Reference">API Reference</a>. Check also <ahref="./Creating-plugins">how to create plugins</a> using the same API.
</code></pre></div><p>In just few lines, with the default configurations, you're already able to see something with which play around.</p><p>[[img/default-gjs.jpg]]</p><p>You'll see components commands on top left position that come handy to create and manage your blocks, below there are options which need to highlight and export them. When you select components ('mouse pointer' icon), on the right side, you should see pop up Class Manager and Style Manager options which allow to customize the style of the components. There is also a Layer Manager/Navigator ('hamburger' icon) which helps to manage easily the structure.</p><p>Of course all those stuff (panels, buttons, commands, etc.) are set just as default so you can overwrite them and add more other. Before you start to create things you should know that GrapesJS UI is composed basically by a canvas (where you will 'draw') and panels (which will contain buttons)</p><p>[[img/canvas-panels.jpg]]</p><p>If you'd like to extend the already instantiated editor you have to check <ahref="API-Reference">API Reference</a>. Check also <ahref="./Creating-plugins">how to create plugins</a> using the same API.
In this guide we'll focus on how to initialize the editor with all custom UI from scratch.</p><p>Let's start the editor with some basic toolbar panel</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
In this guide we'll focus on how to initialize the editor with all custom UI from scratch.</p><p>Let's start the editor with some basic toolbar panel</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token operator">...</span>
</code></pre></div><p>Returns <strong>Model</strong></p><h2id="get"><ahref="#get"aria-hidden="true"class="header-anchor">#</a> get</h2><p>Returns the asset by URL</p><h3id="parameters-2"><ahref="#parameters-2"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>src</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> URL of the asset</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><spanclass="token keyword">var</span> asset <spanclass="token operator">=</span> assetManager<spanclass="token punctuation">.</span><spanclass="token keyword">get</span><spanclass="token punctuation">(</span><spanclass="token string">'http://img.jpg'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>Model</strong></p><h2id="get"><ahref="#get"aria-hidden="true"class="header-anchor">#</a> get</h2><p>Returns the asset by URL</p><h3id="parameters-2"><ahref="#parameters-2"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>src</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> URL of the asset</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><spanclass="token keyword">var</span> asset <spanclass="token operator">=</span> assetManager<spanclass="token punctuation">.</span><spanclass="token function">get</span><spanclass="token punctuation">(</span><spanclass="token string">'http://img.jpg'</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/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> Object representing the asset</p><h2id="getall"><ahref="#getall"aria-hidden="true"class="header-anchor">#</a> getAll</h2><p>Return the global collection, containing all the assets</p><p>Returns <strong>Collection</strong></p><h2id="getallvisible"><ahref="#getallvisible"aria-hidden="true"class="header-anchor">#</a> getAllVisible</h2><p>Return the visible collection, which containes assets actually rendered</p><p>Returns <strong>Collection</strong></p><h2id="remove"><ahref="#remove"aria-hidden="true"class="header-anchor">#</a> remove</h2><p>Remove the asset by its URL</p><h3id="parameters-3"><ahref="#parameters-3"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>src</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> URL of the asset</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>assetManager<spanclass="token punctuation">.</span><spanclass="token function">remove</span><spanclass="token punctuation">(</span><spanclass="token string">'http://img.jpg'</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/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> Object representing the asset</p><h2id="getall"><ahref="#getall"aria-hidden="true"class="header-anchor">#</a> getAll</h2><p>Return the global collection, containing all the assets</p><p>Returns <strong>Collection</strong></p><h2id="getallvisible"><ahref="#getallvisible"aria-hidden="true"class="header-anchor">#</a> getAllVisible</h2><p>Return the visible collection, which containes assets actually rendered</p><p>Returns <strong>Collection</strong></p><h2id="remove"><ahref="#remove"aria-hidden="true"class="header-anchor">#</a> remove</h2><p>Remove the asset by its URL</p><h3id="parameters-3"><ahref="#parameters-3"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>src</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> URL of the asset</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>assetManager<spanclass="token punctuation">.</span><spanclass="token function">remove</span><spanclass="token punctuation">(</span><spanclass="token string">'http://img.jpg'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="store"><ahref="#store"aria-hidden="true"class="header-anchor">#</a> store</h2><p>Store assets data to the selected storage</p><h3id="parameters-4"><ahref="#parameters-4"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>noStore</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> If true, won't store</li></ul><h3id="examples-4"><ahref="#examples-4"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">var</span> assets <spanclass="token operator">=</span> assetManager<spanclass="token punctuation">.</span><spanclass="token function">store</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p><h2id="store"><ahref="#store"aria-hidden="true"class="header-anchor">#</a> store</h2><p>Store assets data to the selected storage</p><h3id="parameters-4"><ahref="#parameters-4"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>noStore</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> If true, won't store</li></ul><h3id="examples-4"><ahref="#examples-4"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">var</span> assets <spanclass="token operator">=</span> assetManager<spanclass="token punctuation">.</span><spanclass="token function">store</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/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> Data to store</p><h2id="load"><ahref="#load"aria-hidden="true"class="header-anchor">#</a> load</h2><p>Load data from the passed object.
</code></pre></div><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> Data to store</p><h2id="load"><ahref="#load"aria-hidden="true"class="header-anchor">#</a> load</h2><p>Load data from the passed object.
</code></pre></div><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="addtype"><ahref="#addtype"aria-hidden="true"class="header-anchor">#</a> addType</h2><p>Add new type. If you want to get more about type definition we suggest to read the <ahref="/docs/modules/Assets.html">module's page</a></p><h3id="parameters-7"><ahref="#parameters-7"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> Type ID</li><li><code>definition</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> Definition of the type. Each definition contains
</code></pre></div><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="addtype"><ahref="#addtype"aria-hidden="true"class="header-anchor">#</a> addType</h2><p>Add new type. If you want to get more about type definition we suggest to read the <ahref="/docs/modules/Assets.html">module's page</a></p><h3id="parameters-7"><ahref="#parameters-7"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> Type ID</li><li><code>definition</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> Definition of the type. Each definition contains
By passing just a function it's intended as a stateless command
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"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>
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 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>
</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 keyword">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"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>
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-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>
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="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">8/10/2018, 12:36:09 AM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
</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">
@ -36,14 +36,14 @@ It's highly recommended to keep this toolbar as small as possible, especially fr
</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>
<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/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></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
<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/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>
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>
...
...
<spanclass="token punctuation">}</span>
<spanclass="token punctuation">}</span>
@ -53,16 +53,16 @@ a look at this code:</p><div class="language-css extra-class"><pre class="langua
@ -44,12 +44,12 @@ Note: New Components and CSSRules will be added automatically</p><h3 id="paramet
</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>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>
</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>
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{232: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);s.options.__file="README.md";t.default=s.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{229: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}}]);
Artur Arseniev
7 years ago