Free and Open source Web Builder Framework. Next generation tool for building templates without coding
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

156 lines
102 KiB

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>GrapesJS</title>
<meta name="generator" content="VuePress 1.7.1">
<link rel="icon" href="/docs/logo-icon.png">
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.16.34">
<script src="../js/grapes.min.js?v0.16.34"></script>
<meta name="description" content="GrapesJS documentation">
<link rel="preload" href="/docs/assets/css/0.styles.338d4c28.css" as="style"><link rel="preload" href="/docs/assets/js/app.833d81e2.js" as="script"><link rel="preload" href="/docs/assets/js/11.6211b361.js" as="script"><link rel="preload" href="/docs/assets/js/2.2c5d9b1d.js" as="script"><link rel="preload" href="/docs/assets/js/30.54f9d7e5.js" as="script"><link rel="prefetch" href="/docs/assets/js/10.365279a4.js"><link rel="prefetch" href="/docs/assets/js/12.c765569c.js"><link rel="prefetch" href="/docs/assets/js/13.a938815d.js"><link rel="prefetch" href="/docs/assets/js/14.e419d6e1.js"><link rel="prefetch" href="/docs/assets/js/15.63207b19.js"><link rel="prefetch" href="/docs/assets/js/16.aede6296.js"><link rel="prefetch" href="/docs/assets/js/17.22bc8766.js"><link rel="prefetch" href="/docs/assets/js/18.f00dd790.js"><link rel="prefetch" href="/docs/assets/js/19.a9a64d12.js"><link rel="prefetch" href="/docs/assets/js/20.efe30d78.js"><link rel="prefetch" href="/docs/assets/js/21.9e10819a.js"><link rel="prefetch" href="/docs/assets/js/22.9fc8148f.js"><link rel="prefetch" href="/docs/assets/js/23.61a787a4.js"><link rel="prefetch" href="/docs/assets/js/24.f9ee42fa.js"><link rel="prefetch" href="/docs/assets/js/25.e87e2b98.js"><link rel="prefetch" href="/docs/assets/js/26.7498717e.js"><link rel="prefetch" href="/docs/assets/js/27.10f5006d.js"><link rel="prefetch" href="/docs/assets/js/28.04a0965c.js"><link rel="prefetch" href="/docs/assets/js/29.f5e06615.js"><link rel="prefetch" href="/docs/assets/js/3.2c8dc5b6.js"><link rel="prefetch" href="/docs/assets/js/31.dbc6776c.js"><link rel="prefetch" href="/docs/assets/js/32.eb0f0320.js"><link rel="prefetch" href="/docs/assets/js/33.830a3ed1.js"><link rel="prefetch" href="/docs/assets/js/34.597d99de.js"><link rel="prefetch" href="/docs/assets/js/35.3ebeaeac.js"><link rel="prefetch" href="/docs/assets/js/36.1ab33e1a.js"><link rel="prefetch" href="/docs/assets/js/37.5bd1d6cd.js"><link rel="prefetch" href="/docs/assets/js/38.5b5df7e9.js"><link rel="prefetch" href="/docs/assets/js/39.f5efacfa.js"><link rel="prefetch" href="/docs/assets/js/4.13618507.js"><link rel="prefetch" href="/docs/assets/js/40.44e40a93.js"><link rel="prefetch" href="/docs/assets/js/41.8377dc00.js"><link rel="prefetch" href="/docs/assets/js/42.c2edd659.js"><link rel="prefetch" href="/docs/assets/js/43.3b35bd7d.js"><link rel="prefetch" href="/docs/assets/js/44.d900498f.js"><link rel="prefetch" href="/docs/assets/js/45.1a63a819.js"><link rel="prefetch" href="/docs/assets/js/46.62574176.js"><link rel="prefetch" href="/docs/assets/js/47.f0121526.js"><link rel="prefetch" href="/docs/assets/js/48.d679a5ad.js"><link rel="prefetch" href="/docs/assets/js/49.b5af5aa6.js"><link rel="prefetch" href="/docs/assets/js/5.ee0017a4.js"><link rel="prefetch" href="/docs/assets/js/50.8c2e77df.js"><link rel="prefetch" href="/docs/assets/js/51.5ab25032.js"><link rel="prefetch" href="/docs/assets/js/52.696e9c1d.js"><link rel="prefetch" href="/docs/assets/js/53.8b670947.js"><link rel="prefetch" href="/docs/assets/js/6.352f9a18.js"><link rel="prefetch" href="/docs/assets/js/7.778e49de.js"><link rel="prefetch" href="/docs/assets/js/8.aefbb0d4.js"><link rel="prefetch" href="/docs/assets/js/9.7c63c649.js">
<link rel="stylesheet" href="/docs/assets/css/0.styles.338d4c28.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" alt="GrapesJS" class="logo"> <span class="site-name can-hide">GrapesJS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
Docs
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link router-link-active">
API Reference
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Support Us
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Twitter
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
Docs
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link router-link-active">
API Reference
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Support Us
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
Twitter
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="native-carbon" class="carbon-ads"></div> <ul class="sidebar-links"><li><a href="/docs/api/" aria-current="page" class="sidebar-link">API Reference</a></li><li><a href="/docs/api/editor.html" aria-current="page" class="active sidebar-link">Editor</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/api/editor.html#editor" class="sidebar-link">Editor</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#available-events" class="sidebar-link">Available Events</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getconfig" class="sidebar-link">getConfig</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#gethtml" class="sidebar-link">getHtml</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getcss" class="sidebar-link">getCss</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getjs" class="sidebar-link">getJs</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getcomponents" class="sidebar-link">getComponents</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getwrapper" class="sidebar-link">getWrapper</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#setcomponents" class="sidebar-link">setComponents</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#addcomponents" class="sidebar-link">addComponents</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getstyle" class="sidebar-link">getStyle</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#setstyle" class="sidebar-link">setStyle</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getselected" class="sidebar-link">getSelected</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getselectedall" class="sidebar-link">getSelectedAll</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getselectedtostyle" class="sidebar-link">getSelectedToStyle</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#select" class="sidebar-link">select</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#selectadd" class="sidebar-link">selectAdd</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#selectremove" class="sidebar-link">selectRemove</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#selecttoggle" class="sidebar-link">selectToggle</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#setdevice" class="sidebar-link">setDevice</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getdevice" class="sidebar-link">getDevice</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#runcommand" class="sidebar-link">runCommand</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#stopcommand" class="sidebar-link">stopCommand</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#store" class="sidebar-link">store</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#load" class="sidebar-link">load</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getcontainer" class="sidebar-link">getContainer</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#getdirtycount" class="sidebar-link">getDirtyCount</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#refresh" class="sidebar-link">refresh</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#setcustomrte" class="sidebar-link">setCustomRte</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#setcustomparsercss" class="sidebar-link">setCustomParserCss</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#setdragmode" class="sidebar-link">setDragMode</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#log" class="sidebar-link">log</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#t" class="sidebar-link">t</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#on" class="sidebar-link">on</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#once" class="sidebar-link">once</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#off" class="sidebar-link">off</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#trigger" class="sidebar-link">trigger</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#destroy" class="sidebar-link">destroy</a></li><li class="sidebar-sub-header"><a href="/docs/api/editor.html#render" class="sidebar-link">render</a></li></ul></li><li><a href="/docs/api/i18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/api/canvas.html" class="sidebar-link">Canvas</a></li><li><a href="/docs/api/assets.html" class="sidebar-link">Asset Manager</a></li><li><a href="/docs/api/block_manager.html" class="sidebar-link">Block Manager</a></li><li><a href="/docs/api/commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/api/components.html" class="sidebar-link">DOM Components</a></li><li><a href="/docs/api/component.html" class="sidebar-link"> - Component</a></li><li><a href="/docs/api/panels.html" class="sidebar-link">Panels</a></li><li><a href="/docs/api/style_manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/api/storage_manager.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/api/device_manager.html" class="sidebar-link">Device Manager</a></li><li><a href="/docs/api/selector_manager.html" class="sidebar-link">Selector Manager</a></li><li><a href="/docs/api/css_composer.html" class="sidebar-link">CSS Composer</a></li><li><a href="/docs/api/modal_dialog.html" class="sidebar-link">Modal</a></li><li><a href="/docs/api/rich_text_editor.html" class="sidebar-link">Rich Text Editor</a></li><li><a href="/docs/api/keymaps.html" class="sidebar-link">Keymaps</a></li><li><a href="/docs/api/undo_manager.html" class="sidebar-link">Undo Manager</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="editor"><a href="#editor" class="header-anchor">#</a> Editor</h2> <p>Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.
You get the Editor instance on init method and you can pass options via its <a href="https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js" target="_blank" rel="noopener noreferrer">Configuration Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// options</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="available-events"><a href="#available-events" class="header-anchor">#</a> Available Events</h2> <p>You can make use of available events in this way</p> <div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'EVENT-NAME'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">some<span class="token punctuation">,</span> argument</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token comment">// do something</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="components"><a href="#components" class="header-anchor">#</a> Components</h3> <ul><li><code>component:create</code> - Component is created (only the model, is not yet mounted in the canvas), called after the init() method</li> <li><code>component:mount</code> - Component is mounted to an element and rendered in canvas</li> <li><code>component:add</code> - Triggered when a new component is added to the editor, the model is passed as an argument to the callback</li> <li><code>component:remove</code> - Triggered when a component is removed, the model is passed as an argument to the callback</li> <li><code>component:clone</code> - Triggered when a component is cloned, the new model is passed as an argument to the callback</li> <li><code>component:update</code> - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback</li> <li><code>component:update:{propertyName}</code> - Listen any property change, the model is passed as an argument to the callback</li> <li><code>component:styleUpdate</code> - Triggered when the style of the component is updated, the model is passed as an argument to the callback</li> <li><code>component:styleUpdate:{propertyName}</code> - Listen for a specific style property change, the model is passed as an argument to the callback</li> <li><code>component:selected</code> - New component selected, the selected model is passed as an argument to the callback</li> <li><code>component:deselected</code> - Component deselected, the deselected model is passed as an argument to the callback</li> <li><code>component:toggled</code> - Component selection changed, toggled model is passed as an argument to the callback</li> <li><code>component:type:add</code> - New component type added, the new type is passed as an argument to the callback</li> <li><code>component:type:update</code> - Component type updated, the updated type is passed as an argument to the callback</li> <li><code>component:drag:start</code> - Component drag started. Passed an object, to the callback, containing the <code>target</code> (component to drag), <code>parent</code> (parent of the component) and <code>index</code> (component index in the parent)</li> <li><code>component:drag</code> - During component drag. Passed the same object as in <code>component:drag:start</code> event, but in this case, <code>parent</code> and <code>index</code> are updated by the current pointer</li> <li><code>component:drag:end</code> - Component drag ended. Passed the same object as in <code>component:drag:start</code> event, but in this case, <code>parent</code> and <code>index</code> are updated by the final pointer</li></ul> <h3 id="blocks"><a href="#blocks" class="header-anchor">#</a> Blocks</h3> <ul><li><code>block:add</code> - New block added</li> <li><code>block:remove</code> - Block removed</li> <li><code>block:drag:start</code> - Started dragging block, model of the block is passed as an argument</li> <li><code>block:drag</code> - Dragging block, the block's model and the drag event are passed as arguments</li> <li><code>block:drag:stop</code> - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block</li></ul> <h3 id="assets"><a href="#assets" class="header-anchor">#</a> Assets</h3> <ul><li><code>asset:add</code> - New asset added</li> <li><code>asset:remove</code> - Asset removed</li> <li><code>asset:upload:start</code> - Before the upload is started</li> <li><code>asset:upload:end</code> - After the upload is ended</li> <li><code>asset:upload:error</code> - On any error in upload, passes the error as an argument</li> <li><code>asset:upload:response</code> - On upload response, passes the result as an argument</li></ul> <h3 id="keymaps"><a href="#keymaps" class="header-anchor">#</a> Keymaps</h3> <ul><li><code>keymap:add</code> - New keymap added. The new keyamp object is passed as an argument</li> <li><code>keymap:remove</code> - Keymap removed. The removed keyamp object is passed as an argument</li> <li><code>keymap:emit</code> - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event</li> <li><code>keymap:emit:{keymapId}</code> - <code>keymapId</code> emitted, in arguments you get keymapId, shortcutUsed, Event</li></ul> <h3 id="style-manager"><a href="#style-manager" class="header-anchor">#</a> Style Manager</h3> <ul><li><code>styleManager:update:target</code> - The target (Component or CSSRule) is changed</li> <li><code>styleManager:change</code> - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback</li> <li><code>styleManager:change:{propertyName}</code> - As above but for a specific style property</li></ul> <h3 id="storages"><a href="#storages" class="header-anchor">#</a> Storages</h3> <ul><li><code>storage:start</code> - Before the storage request is started</li> <li><code>storage:start:store</code> - Before the store request. The object to store is passed as an argumnet (which you can edit)</li> <li><code>storage:start:load</code> - Before the load request. Items to load are passed as an argumnet (which you can edit)</li> <li><code>storage:load</code> - Triggered when something was loaded from the storage, loaded object passed as an argumnet</li> <li><code>storage:store</code> - Triggered when something is stored to the storage, stored object passed as an argumnet</li> <li><code>storage:end</code> - After the storage request is ended</li> <li><code>storage:end:store</code> - After the store request</li> <li><code>storage:end:load</code> - After the load request</li> <li><code>storage:error</code> - On any error on storage request, passes the error as an argument</li> <li><code>storage:error:store</code> - Error on store request, passes the error as an argument</li> <li><code>storage:error:load</code> - Error on load request, passes the error as an argument</li></ul> <h3 id="canvas"><a href="#canvas" class="header-anchor">#</a> Canvas</h3> <ul><li><code>canvas:dragenter</code> - When something is dragged inside the canvas, <code>DataTransfer</code> instance passed as an argument</li> <li><code>canvas:dragover</code> - When something is dragging on canvas, <code>DataTransfer</code> instance passed as an argument</li> <li><code>canvas:drop</code> - Something is dropped in canvas, <code>DataTransfer</code> instance and the dropped model are passed as arguments</li> <li><code>canvas:dragend</code> - When a drag operation is ended, <code>DataTransfer</code> instance passed as an argument</li> <li><code>canvas:dragdata</code> - On any dataTransfer parse, <code>DataTransfer</code> instance and the <code>result</code> are passed as arguments.
By changing <code>result.content</code> you're able to customize what is dropped</li></ul> <h3 id="selectors"><a href="#selectors" class="header-anchor">#</a> Selectors</h3> <ul><li><code>selector:add</code> - New selector is add. Passes the new selector as an argument</li> <li><code>selector:remove</code> - Selector removed. Passes the removed selector as an argument</li> <li><code>selector:update</code> - Selector updated. Passes the updated selector as an argument</li> <li><code>selector:state</code> - State changed. Passes the new state value as an argument</li></ul> <h3 id="rte"><a href="#rte" class="header-anchor">#</a> RTE</h3> <ul><li><code>rte:enable</code> - RTE enabled. The view, on which RTE is enabled, is passed as an argument</li> <li><code>rte:disable</code> - RTE disabled. The view, on which RTE is disabled, is passed as an argument</li></ul> <h3 id="modal"><a href="#modal" class="header-anchor">#</a> Modal</h3> <ul><li><code>modal:open</code> - Modal is opened</li> <li><code>modal:close</code> - Modal is closed</li></ul> <h3 id="parser"><a href="#parser" class="header-anchor">#</a> Parser</h3> <ul><li><code>parse:html</code> - On HTML parse, an object containing the input and the output of the parser is passed as an argument</li> <li><code>parse:css</code> - On CSS parse, an object containing the input and the output of the parser is passed as an argument</li></ul> <h3 id="commands"><a href="#commands" class="header-anchor">#</a> Commands</h3> <ul><li><code>run:{commandName}</code> - Triggered when some command is called to run (eg. editor.runCommand('preview'))</li> <li><code>stop:{commandName}</code> - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))</li> <li><code>run:{commandName}:before</code> - Triggered before the command is called</li> <li><code>stop:{commandName}:before</code> - Triggered before the command is called to stop</li> <li><code>abort:{commandName}</code> - Triggered when the command execution is aborted (<code>editor.on(</code>run:preview:before<code>, opts =&gt; opts.abort = 1);</code>)</li> <li><code>run</code> - Triggered on run of any command. The id and the result are passed as arguments to the callback</li> <li><code>stop</code> - Triggered on stop of any command. The id and the result are passed as arguments to the callback</li></ul> <h3 id="general"><a href="#general" class="header-anchor">#</a> General</h3> <ul><li><code>canvasScroll</code> - Canvas is scrolled</li> <li><code>update</code> - The structure of the template is updated (its HTML/CSS)</li> <li><code>undo</code> - Undo executed</li> <li><code>redo</code> - Redo executed</li> <li><code>load</code> - Editor is loaded</li></ul> <h2 id="getconfig"><a href="#getconfig" class="header-anchor">#</a> getConfig</h2> <p>Returns configuration object</p> <h3 id="parameters"><a href="#parameters" class="header-anchor">#</a> Parameters</h3> <ul><li><code>prop</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>?</strong> Property name</li></ul> <p>Returns <strong>any</strong> Returns the configuration object or
the value of the specified property</p> <h2 id="gethtml"><a href="#gethtml" class="header-anchor">#</a> getHtml</h2> <p>Returns HTML built inside canvas</p> <h3 id="parameters-2"><a href="#parameters-2" class="header-anchor">#</a> Parameters</h3> <ul><li><code>opts</code></li></ul> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> HTML string</p> <h2 id="getcss"><a href="#getcss" class="header-anchor">#</a> getCss</h2> <p>Returns CSS built inside canvas</p> <h3 id="parameters-3"><a href="#parameters-3" class="header-anchor">#</a> Parameters</h3> <ul><li><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Options (optional, default <code>{}</code>)
<ul><li><code>opts.avoidProtected</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Don't include protected CSS (optional, default <code>false</code>)</li></ul></li></ul> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> CSS string</p> <h2 id="getjs"><a href="#getjs" class="header-anchor">#</a> getJs</h2> <p>Returns JS of all components</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> JS string</p> <h2 id="getcomponents"><a href="#getcomponents" class="header-anchor">#</a> getComponents</h2> <p>Return the complete tree of components. Use <code>getWrapper</code> to include also the wrapper</p> <p>Returns <strong>Components</strong></p> <h2 id="getwrapper"><a href="#getwrapper" class="header-anchor">#</a> getWrapper</h2> <p>Return the wrapper and its all components</p> <p>Returns <strong>Component</strong></p> <h2 id="setcomponents"><a href="#setcomponents" class="header-anchor">#</a> setComponents</h2> <p>Set components inside editor's canvas. This method overrides actual components</p> <h3 id="parameters-4"><a href="#parameters-4" class="header-anchor">#</a> Parameters</h3> <ul><li><code>components</code> <strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>&lt;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>&gt; | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</strong> HTML string or components model</li> <li><code>opt</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> the options object to be used by the [setComponents]<a href="em#setComponents">em#setComponents</a> method (optional, default <code>{}</code>)</li></ul> <h3 id="examples"><a href="#examples" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">setComponents</span><span class="token punctuation">(</span><span class="token string">'&lt;div class=&quot;cls&quot;&gt;New component&lt;/div&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// or</span>
editor<span class="token punctuation">.</span><span class="token function">setComponents</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
classes<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'cls'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
content<span class="token operator">:</span> <span class="token string">'New component'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="addcomponents"><a href="#addcomponents" class="header-anchor">#</a> addComponents</h2> <p>Add components</p> <h3 id="parameters-5"><a href="#parameters-5" class="header-anchor">#</a> Parameters</h3> <ul><li><code>components</code> <strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>&lt;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>&gt; | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</strong> HTML string or components model</li> <li><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Options
<ul><li><code>opts.avoidUpdateStyle</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> If the HTML string contains styles,
by default, they will be created and, if already exist, updated. When this option
is true, styles already created will not be updated. (optional, default <code>false</code>)</li></ul></li></ul> <h3 id="examples-2"><a href="#examples-2" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">addComponents</span><span class="token punctuation">(</span><span class="token string">'&lt;div class=&quot;cls&quot;&gt;New component&lt;/div&gt;'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// or</span>
editor<span class="token punctuation">.</span><span class="token function">addComponents</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
type<span class="token operator">:</span> <span class="token string">'text'</span><span class="token punctuation">,</span>
classes<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'cls'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
content<span class="token operator">:</span> <span class="token string">'New component'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>&lt;Component&gt;</strong></p> <h2 id="getstyle"><a href="#getstyle" class="header-anchor">#</a> getStyle</h2> <p>Returns style in JSON format object</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="setstyle"><a href="#setstyle" class="header-anchor">#</a> setStyle</h2> <p>Set style inside editor's canvas. This method overrides actual style</p> <h3 id="parameters-6"><a href="#parameters-6" class="header-anchor">#</a> Parameters</h3> <ul><li><code>style</code> <strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>&lt;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>&gt; | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</strong> CSS string or style model</li> <li><code>opt</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> the options object to be used by the [setStyle]<a href="em#setStyle">em#setStyle</a> method (optional, default <code>{}</code>)</li></ul> <h3 id="examples-3"><a href="#examples-3" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">setStyle</span><span class="token punctuation">(</span><span class="token string">'.cls{color: red}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//or</span>
editor<span class="token punctuation">.</span><span class="token function">setStyle</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
selectors<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'cls'</span><span class="token punctuation">]</span>
style<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="getselected"><a href="#getselected" class="header-anchor">#</a> getSelected</h2> <p>Returns the last selected component, if there is one</p> <p>Returns <strong>Model</strong></p> <h2 id="getselectedall"><a href="#getselectedall" class="header-anchor">#</a> getSelectedAll</h2> <p>Returns an array of all selected components</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="getselectedtostyle"><a href="#getselectedtostyle" class="header-anchor">#</a> getSelectedToStyle</h2> <p>Get a stylable entity from the selected component.
If you select a component without classes the entity is the Component
itself and all changes will go inside its 'style' attribute. Otherwise,
if the selected component has one or more classes, the function will
return the corresponding CSS Rule</p> <p>Returns <strong>Model</strong></p> <h2 id="select"><a href="#select" class="header-anchor">#</a> select</h2> <p>Select a component</p> <h3 id="parameters-7"><a href="#parameters-7" class="header-anchor">#</a> Parameters</h3> <ul><li><code>el</code> <strong>(Component | <a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</strong> Component to select</li> <li><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>?</strong> Options
<ul><li><code>opts.scroll</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>?</strong> Scroll canvas to the selected element</li></ul></li></ul> <h3 id="examples-4"><a href="#examples-4" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// Select dropped block</span>
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'block:drag:stop'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">model</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
editor<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span>model<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="selectadd"><a href="#selectadd" class="header-anchor">#</a> selectAdd</h2> <p>Add component to selection</p> <h3 id="parameters-8"><a href="#parameters-8" class="header-anchor">#</a> Parameters</h3> <ul><li><code>el</code> <strong>(Component | <a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</strong> Component to select</li></ul> <h3 id="examples-5"><a href="#examples-5" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">selectAdd</span><span class="token punctuation">(</span>model<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="selectremove"><a href="#selectremove" class="header-anchor">#</a> selectRemove</h2> <p>Remove component from selection</p> <h3 id="parameters-9"><a href="#parameters-9" class="header-anchor">#</a> Parameters</h3> <ul><li><code>el</code> <strong>(Component | <a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</strong> Component to select</li></ul> <h3 id="examples-6"><a href="#examples-6" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">selectRemove</span><span class="token punctuation">(</span>model<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="selecttoggle"><a href="#selecttoggle" class="header-anchor">#</a> selectToggle</h2> <p>Toggle component selection</p> <h3 id="parameters-10"><a href="#parameters-10" class="header-anchor">#</a> Parameters</h3> <ul><li><code>el</code> <strong>(Component | <a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array" target="_blank" rel="noopener noreferrer">Array<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</strong> Component to select</li></ul> <h3 id="examples-7"><a href="#examples-7" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">selectToggle</span><span class="token punctuation">(</span>model<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="setdevice"><a href="#setdevice" class="header-anchor">#</a> setDevice</h2> <p>Set device to the editor. If the device exists it will
change the canvas to the proper width</p> <h3 id="parameters-11"><a href="#parameters-11" class="header-anchor">#</a> Parameters</h3> <ul><li><code>name</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Name of the device</li></ul> <h3 id="examples-8"><a href="#examples-8" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">setDevice</span><span class="token punctuation">(</span><span class="token string">'Tablet'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="getdevice"><a href="#getdevice" class="header-anchor">#</a> getDevice</h2> <p>Return the actual active device</p> <h3 id="examples-9"><a href="#examples-9" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> device <span class="token operator">=</span> editor<span class="token punctuation">.</span><span class="token function">getDevice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>device<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 'Tablet'</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Device name</p> <h2 id="runcommand"><a href="#runcommand" class="header-anchor">#</a> runCommand</h2> <p>Execute command</p> <h3 id="parameters-12"><a href="#parameters-12" class="header-anchor">#</a> Parameters</h3> <ul><li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Command ID</li> <li><code>options</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Custom options (optional, default <code>{}</code>)</li></ul> <h3 id="examples-10"><a href="#examples-10" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">runCommand</span><span class="token punctuation">(</span><span class="token string">'myCommand'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>someValue<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p> <h2 id="stopcommand"><a href="#stopcommand" class="header-anchor">#</a> stopCommand</h2> <p>Stop the command if stop method was provided</p> <h3 id="parameters-13"><a href="#parameters-13" class="header-anchor">#</a> Parameters</h3> <ul><li><code>id</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Command ID</li> <li><code>options</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Custom options (optional, default <code>{}</code>)</li></ul> <h3 id="examples-11"><a href="#examples-11" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">stopCommand</span><span class="token punctuation">(</span><span class="token string">'myCommand'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>someValue<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>any</strong> The return is defined by the command</p> <h2 id="store"><a href="#store" class="header-anchor">#</a> store</h2> <p>Store data to the current storage</p> <h3 id="parameters-14"><a href="#parameters-14" class="header-anchor">#</a> Parameters</h3> <ul><li><code>clb</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Callback function</li></ul> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Stored data</p> <h2 id="load"><a href="#load" class="header-anchor">#</a> load</h2> <p>Load data from the current storage</p> <h3 id="parameters-15"><a href="#parameters-15" class="header-anchor">#</a> Parameters</h3> <ul><li><code>clb</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Callback function</li></ul> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Stored data</p> <h2 id="getcontainer"><a href="#getcontainer" class="header-anchor">#</a> getContainer</h2> <p>Returns container element. The one which was indicated as 'container'
on init method</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="getdirtycount"><a href="#getdirtycount" class="header-anchor">#</a> getDirtyCount</h2> <p>Return the count of changes made to the content and not yet stored.
This count resets at any <code>store()</code></p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number" target="_blank" rel="noopener noreferrer">number<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="refresh"><a href="#refresh" class="header-anchor">#</a> refresh</h2> <p>Update editor dimension offsets</p> <p>This method could be useful when you update, for example, some position
of the editor element (eg. canvas, panels, etc.) with CSS, where without
refresh you'll get misleading position of tools</p> <h3 id="parameters-16"><a href="#parameters-16" class="header-anchor">#</a> Parameters</h3> <ul><li><code>opts</code></li> <li><code>options</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>?</strong> Options
<ul><li><code>options.tools</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default <code>false</code>)</li></ul></li></ul> <h2 id="setcustomrte"><a href="#setcustomrte" class="header-anchor">#</a> setCustomRte</h2> <p>Replace the built-in Rich Text Editor with a custom one.</p> <h3 id="parameters-17"><a href="#parameters-17" class="header-anchor">#</a> Parameters</h3> <ul><li><code>obj</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Custom RTE Interface</li></ul> <h3 id="examples-12"><a href="#examples-12" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">setCustomRte</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// Function for enabling custom RTE</span>
<span class="token comment">// el is the HTMLElement of the double clicked Text Component</span>
<span class="token comment">// rte is the same instance you have returned the first time you call</span>
<span class="token comment">// enable(). This is useful if need to check if the RTE is already enabled so</span>
<span class="token comment">// ion this case you'll need to return the RTE and the end of the function</span>
<span class="token function-variable function">enable</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> rte</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
rte <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MyCustomRte</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// this depends on the Custom RTE API</span>
<span class="token operator">...</span>
<span class="token keyword">return</span> rte<span class="token punctuation">;</span> <span class="token comment">// return the RTE instance</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">// Disable the editor, called for example when you unfocus the Text Component</span>
<span class="token function-variable function">disable</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> rte</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
rte<span class="token punctuation">.</span><span class="token function">blur</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// this depends on the Custom RTE API</span>
<span class="token punctuation">}</span>
<span class="token comment">// Called when the Text Component is focused again. If you returned the RTE instance</span>
<span class="token comment">// from the enable function, the enable won't be called again instead will call focus,</span>
<span class="token comment">// in this case to avoid double binding of the editor</span>
<span class="token function-variable function">focus</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> rte</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
rte<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// this depends on the Custom RTE API</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="setcustomparsercss"><a href="#setcustomparsercss" class="header-anchor">#</a> setCustomParserCss</h2> <p>Replace the default CSS parser with a custom one.
The parser function receives a CSS string as a parameter and expects
an array of CSSRule objects as a result. If you need to remove the
custom parser, pass <code>null</code> as the argument</p> <h3 id="parameters-18"><a href="#parameters-18" class="header-anchor">#</a> Parameters</h3> <ul><li><code>parser</code> <strong>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> | null)</strong> Parser function</li></ul> <h3 id="examples-13"><a href="#examples-13" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">setCustomParserCss</span><span class="token punctuation">(</span><span class="token parameter">css</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// ... parse the CSS string</span>
result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
selectors<span class="token operator">:</span> <span class="token string">'.someclass, div .otherclass'</span><span class="token punctuation">,</span>
style<span class="token operator">:</span> <span class="token punctuation">{</span> color<span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// ...</span>
<span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="setdragmode"><a href="#setdragmode" class="header-anchor">#</a> setDragMode</h2> <p>Change the global drag mode of components.
To get more about this feature read: <a href="https://github.com/artf/grapesjs/issues/1936" target="_blank" rel="noopener noreferrer">https://github.com/artf/grapesjs/issues/1936<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="parameters-19"><a href="#parameters-19" class="header-anchor">#</a> Parameters</h3> <ul><li><code>value</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Drag mode, options: 'absolute' | 'translate'</li></ul> <p>Returns <strong>this</strong></p> <h2 id="log"><a href="#log" class="header-anchor">#</a> log</h2> <p>Trigger event log message</p> <h3 id="parameters-20"><a href="#parameters-20" class="header-anchor">#</a> Parameters</h3> <ul><li><code>msg</code> <strong>any</strong> Message to log</li> <li><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Custom options (optional, default <code>{}</code>)
<ul><li><code>opts.ns</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Namespace of the log (eg. to use in plugins) (optional, default <code>''</code>)</li> <li><code>opts.level</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Level of the log, <code>debug</code>, <code>info</code>, <code>warning</code>, <code>error</code> (optional, default <code>'debug'</code>)</li></ul></li></ul> <h3 id="examples-14"><a href="#examples-14" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Something done!'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> ns<span class="token operator">:</span> <span class="token string">'from-plugin-x'</span><span class="token punctuation">,</span> level<span class="token operator">:</span> <span class="token string">'info'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// This will trigger following events</span>
<span class="token comment">// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`</span>
<span class="token comment">// Callbacks of those events will always receive the message and</span>
<span class="token comment">// options, as arguments, eg:</span>
<span class="token comment">// editor.on('log:info', (msg, opts) =&gt; console.info(msg, opts))</span>
</code></pre></div><p>Returns <strong>this</strong></p> <h2 id="t"><a href="#t" class="header-anchor">#</a> t</h2> <p>Translate label</p> <h3 id="parameters-21"><a href="#parameters-21" class="header-anchor">#</a> Parameters</h3> <ul><li><code>args</code> <strong>...any</strong></li> <li><code>key</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Label to translate</li> <li><code>opts</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>?</strong> Options for the translation
<ul><li><code>opts.params</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank" rel="noopener noreferrer">Object<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>?</strong> Params for the translation</li> <li><code>opts.noWarn</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank" rel="noopener noreferrer">Boolean<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>?</strong> Avoid warnings in case of missing resources</li></ul></li></ul> <h3 id="examples-15"><a href="#examples-15" class="header-anchor">#</a> Examples</h3> <div class="language-javascript extra-class"><pre class="language-javascript"><code>editor<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'msg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// use params</span>
editor<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'msg2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> params<span class="token operator">:</span> <span class="token punctuation">{</span> test<span class="token operator">:</span> <span class="token string">'hello'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// custom local</span>
editor<span class="token punctuation">.</span><span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'msg2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> params<span class="token operator">:</span> <span class="token punctuation">{</span> test<span class="token operator">:</span> <span class="token string">'hello'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> l<span class="token operator">:</span> <span class="token string">'it'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">String<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p> <h2 id="on"><a href="#on" class="header-anchor">#</a> on</h2> <p>Attach event</p> <h3 id="parameters-22"><a href="#parameters-22" class="header-anchor">#</a> Parameters</h3> <ul><li><code>event</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Event name</li> <li><code>callback</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Callback function</li></ul> <p>Returns <strong>this</strong></p> <h2 id="once"><a href="#once" class="header-anchor">#</a> once</h2> <p>Attach event and detach it after the first run</p> <h3 id="parameters-23"><a href="#parameters-23" class="header-anchor">#</a> Parameters</h3> <ul><li><code>event</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Event name</li> <li><code>callback</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Callback function</li></ul> <p>Returns <strong>this</strong></p> <h2 id="off"><a href="#off" class="header-anchor">#</a> off</h2> <p>Detach event</p> <h3 id="parameters-24"><a href="#parameters-24" class="header-anchor">#</a> Parameters</h3> <ul><li><code>event</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Event name</li> <li><code>callback</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function" target="_blank" rel="noopener noreferrer">Function<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Callback function</li></ul> <p>Returns <strong>this</strong></p> <h2 id="trigger"><a href="#trigger" class="header-anchor">#</a> trigger</h2> <p>Trigger event</p> <h3 id="parameters-25"><a href="#parameters-25" class="header-anchor">#</a> Parameters</h3> <ul><li><code>event</code> <strong><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank" rel="noopener noreferrer">string<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong> Event to trigger</li></ul> <p>Returns <strong>this</strong></p> <h2 id="destroy"><a href="#destroy" class="header-anchor">#</a> destroy</h2> <p>Destroy the editor</p> <h2 id="render"><a href="#render" class="header-anchor">#</a> render</h2> <p>Render editor</p> <p>Returns <strong><a href="https://developer.mozilla.org/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">HTMLElement<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></strong></p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/api/editor.md" target="_blank" rel="noopener noreferrer">Edit this page on GitHub</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">10/24/2020, 3:47:30 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/docs/api/" class="prev router-link-active">
API Reference
</a></span> <span class="next"><a href="/docs/api/i18n.html">
I18n
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/docs/assets/js/app.833d81e2.js" defer></script><script src="/docs/assets/js/11.6211b361.js" defer></script><script src="/docs/assets/js/2.2c5d9b1d.js" defer></script><script src="/docs/assets/js/30.54f9d7e5.js" defer></script>
</body>
</html>