mirror of https://github.com/artf/grapesjs.git
nocodeframeworkdrag-and-dropsite-buildersite-generatortemplate-builderui-builderweb-builderweb-builder-frameworkwebsite-builderno-codepage-builder
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
48 KiB
220 lines
48 KiB
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Asset Manager | GrapesJS</title>
|
|
<meta name="generator" content="VuePress 1.9.10">
|
|
<link rel="icon" href="/docs/logo-icon.png">
|
|
<link rel="stylesheet" href="https://grapesjs.com/stylesheets/grapes.min.css?v0.21.10">
|
|
<script src="https://grapesjs.com/js/grapes.min.js?v0.21.10"></script>
|
|
<meta name="description" content="GrapesJS documentation">
|
|
|
|
<link rel="preload" href="/docs/assets/css/0.styles.c7ff573f.css" as="style"><link rel="preload" href="/docs/assets/js/app.7cba500a.js" as="script"><link rel="preload" href="/docs/assets/js/4.0070552e.js" as="script"><link rel="preload" href="/docs/assets/js/2.6fefd022.js" as="script"><link rel="preload" href="/docs/assets/js/1.d23e9fed.js" as="script"><link rel="preload" href="/docs/assets/js/80.43bf5b47.js" as="script"><link rel="preload" href="/docs/assets/js/33.a739af41.js" as="script"><link rel="prefetch" href="/docs/assets/js/12.fcd6c1b3.js"><link rel="prefetch" href="/docs/assets/js/13.f8ba6288.js"><link rel="prefetch" href="/docs/assets/js/14.37d1e434.js"><link rel="prefetch" href="/docs/assets/js/15.6e77df13.js"><link rel="prefetch" href="/docs/assets/js/16.c5f433ca.js"><link rel="prefetch" href="/docs/assets/js/17.de56d7c2.js"><link rel="prefetch" href="/docs/assets/js/18.bf39ac98.js"><link rel="prefetch" href="/docs/assets/js/19.ca87c57f.js"><link rel="prefetch" href="/docs/assets/js/20.68039d84.js"><link rel="prefetch" href="/docs/assets/js/21.2b429912.js"><link rel="prefetch" href="/docs/assets/js/22.27b0a8c5.js"><link rel="prefetch" href="/docs/assets/js/23.a6d68e8d.js"><link rel="prefetch" href="/docs/assets/js/24.74960541.js"><link rel="prefetch" href="/docs/assets/js/25.ca71342f.js"><link rel="prefetch" href="/docs/assets/js/26.33a13a48.js"><link rel="prefetch" href="/docs/assets/js/27.54f6b393.js"><link rel="prefetch" href="/docs/assets/js/28.cf1f128d.js"><link rel="prefetch" href="/docs/assets/js/29.5888c207.js"><link rel="prefetch" href="/docs/assets/js/3.4e94790f.js"><link rel="prefetch" href="/docs/assets/js/30.bace5f23.js"><link rel="prefetch" href="/docs/assets/js/31.2b0fa15d.js"><link rel="prefetch" href="/docs/assets/js/32.fdf463ac.js"><link rel="prefetch" href="/docs/assets/js/34.27801365.js"><link rel="prefetch" href="/docs/assets/js/35.55be1c25.js"><link rel="prefetch" href="/docs/assets/js/36.78a4b7a9.js"><link rel="prefetch" href="/docs/assets/js/37.a1d1286c.js"><link rel="prefetch" href="/docs/assets/js/38.7f94984b.js"><link rel="prefetch" href="/docs/assets/js/39.bae8130f.js"><link rel="prefetch" href="/docs/assets/js/40.d641c435.js"><link rel="prefetch" href="/docs/assets/js/41.2f0da2d4.js"><link rel="prefetch" href="/docs/assets/js/42.a0743242.js"><link rel="prefetch" href="/docs/assets/js/43.8460a28b.js"><link rel="prefetch" href="/docs/assets/js/44.943c0253.js"><link rel="prefetch" href="/docs/assets/js/45.aafa45da.js"><link rel="prefetch" href="/docs/assets/js/46.ad246b82.js"><link rel="prefetch" href="/docs/assets/js/47.b412adfe.js"><link rel="prefetch" href="/docs/assets/js/48.af9cac86.js"><link rel="prefetch" href="/docs/assets/js/49.86ad40ac.js"><link rel="prefetch" href="/docs/assets/js/5.08dc74a9.js"><link rel="prefetch" href="/docs/assets/js/50.f7509701.js"><link rel="prefetch" href="/docs/assets/js/51.8c42f1c6.js"><link rel="prefetch" href="/docs/assets/js/52.82b56909.js"><link rel="prefetch" href="/docs/assets/js/53.5f6601a1.js"><link rel="prefetch" href="/docs/assets/js/54.e8a69f95.js"><link rel="prefetch" href="/docs/assets/js/55.22891dc5.js"><link rel="prefetch" href="/docs/assets/js/56.f7e9921e.js"><link rel="prefetch" href="/docs/assets/js/57.578f14f1.js"><link rel="prefetch" href="/docs/assets/js/58.64b9e09c.js"><link rel="prefetch" href="/docs/assets/js/59.135e8739.js"><link rel="prefetch" href="/docs/assets/js/6.3a6e1ed3.js"><link rel="prefetch" href="/docs/assets/js/60.c21dfd9f.js"><link rel="prefetch" href="/docs/assets/js/61.c49c5b1e.js"><link rel="prefetch" href="/docs/assets/js/62.ce5bed3d.js"><link rel="prefetch" href="/docs/assets/js/63.3ee6f39c.js"><link rel="prefetch" href="/docs/assets/js/64.b439d27f.js"><link rel="prefetch" href="/docs/assets/js/65.ee472a88.js"><link rel="prefetch" href="/docs/assets/js/66.becd0d7a.js"><link rel="prefetch" href="/docs/assets/js/67.166cf34e.js"><link rel="prefetch" href="/docs/assets/js/68.36615226.js"><link rel="prefetch" href="/docs/assets/js/69.9a5913c7.js"><link rel="prefetch" href="/docs/assets/js/7.b99a3113.js"><link rel="prefetch" href="/docs/assets/js/70.8663a867.js"><link rel="prefetch" href="/docs/assets/js/71.8b580dcf.js"><link rel="prefetch" href="/docs/assets/js/72.355b7953.js"><link rel="prefetch" href="/docs/assets/js/73.b9ad99cd.js"><link rel="prefetch" href="/docs/assets/js/74.517d9902.js"><link rel="prefetch" href="/docs/assets/js/75.183f30c2.js"><link rel="prefetch" href="/docs/assets/js/76.894100bc.js"><link rel="prefetch" href="/docs/assets/js/77.a896626f.js"><link rel="prefetch" href="/docs/assets/js/78.a8d38215.js"><link rel="prefetch" href="/docs/assets/js/79.d0ad637c.js"><link rel="prefetch" href="/docs/assets/js/8.c0e09a5e.js"><link rel="prefetch" href="/docs/assets/js/81.a3f44150.js"><link rel="prefetch" href="/docs/assets/js/82.514bee1c.js"><link rel="prefetch" href="/docs/assets/js/83.288e8f5d.js"><link rel="prefetch" href="/docs/assets/js/84.76c28d97.js"><link rel="prefetch" href="/docs/assets/js/85.c70a27f1.js"><link rel="prefetch" href="/docs/assets/js/86.d1d289b7.js"><link rel="prefetch" href="/docs/assets/js/87.bced23ab.js"><link rel="prefetch" href="/docs/assets/js/88.f0049b73.js"><link rel="prefetch" href="/docs/assets/js/89.c2ba01c2.js"><link rel="prefetch" href="/docs/assets/js/9.6121e0b4.js"><link rel="prefetch" href="/docs/assets/js/90.529090e5.js"><link rel="prefetch" href="/docs/assets/js/91.dd59134d.js"><link rel="prefetch" href="/docs/assets/js/92.d3e7c08c.js"><link rel="prefetch" href="/docs/assets/js/93.a12b0826.js"><link rel="prefetch" href="/docs/assets/js/94.036e5ed0.js"><link rel="prefetch" href="/docs/assets/js/vendors~docsearch.0da9b1d4.js">
|
|
<link rel="stylesheet" href="/docs/assets/css/0.styles.c7ff573f.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/docs/" class="home-link router-link-active"><img src="/docs/logo.png" alt="GrapesJS" class="logo"> <span class="site-name can-hide">GrapesJS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link">
|
|
Docs
|
|
</a></div><div class="nav-item"><a href="/docs/api/" class="nav-link">
|
|
API Reference
|
|
</a></div><div class="nav-item"><a href="https://opencollective.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Support Us
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div id="native-carbon" class="carbon-ads"></div> <ul class="sidebar-links"><li><a href="/docs/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Modules</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/modules/Components.html" class="sidebar-link">Components</a></li><li><a href="/docs/modules/Components-js.html" class="sidebar-link">Components & JS</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Traits</a></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Assets.html" aria-current="page" class="active sidebar-link">Assets</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#initialization" class="sidebar-link">Initialization</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#uploading-assets" class="sidebar-link">Uploading assets</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#programmatic-usage" class="sidebar-link">Programmatic usage</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#customization" class="sidebar-link">Customization</a></li><li class="sidebar-sub-header"><a href="/docs/modules/Assets.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><li><a href="/docs/modules/I18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/modules/Selectors.html" class="sidebar-link">Selectors</a></li><li><a href="/docs/modules/Layers.html" class="sidebar-link">Layers</a></li><li><a href="/docs/modules/Pages.html" class="sidebar-link">Pages</a></li><li><a href="/docs/modules/Style-manager.html" class="sidebar-link">Style Manager</a></li><li><a href="/docs/modules/Storage.html" class="sidebar-link">Storage Manager</a></li><li><a href="/docs/modules/Modal.html" class="sidebar-link">Modal</a></li><li><a href="/docs/modules/Plugins.html" class="sidebar-link">Plugins</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Guides</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/guides/Replace-Rich-Text-Editor.html" class="sidebar-link">Replace Rich Text Editor</a></li><li><a href="/docs/guides/Custom-CSS-parser.html" class="sidebar-link">Use Custom CSS Parser</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="asset-manager"><a href="#asset-manager" class="header-anchor">#</a> Asset Manager</h1> <p align="center"><img src="http://grapesjs.com/img/sc-grapesjs-assets-1.jpg" alt="GrapesJS - Asset Manager" align="center"></p> <p>In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS. The Asset Manager is lightweight and implements just an <code>image</code> in its core, but as you'll see next it's easy to extend and create your own asset types.</p> <p></p><div class="table-of-contents"><ul><li><a href="#configuration">Configuration</a></li><li><a href="#initialization">Initialization</a></li><li><a href="#uploading-assets">Uploading assets</a><ul><li><a href="#listeners">Listeners</a></li><li><a href="#response">Response</a></li></ul></li><li><a href="#programmatic-usage">Programmatic usage</a><ul><li><a href="#custom-select-logic">Custom select logic</a></li></ul></li><li><a href="#customization">Customization</a></li><li><a href="#events">Events</a></li></ul></div><p></p> <h2 id="configuration"><a href="#configuration" class="header-anchor">#</a> Configuration</h2> <p>To change default configurations you'd need to pass the <code>assetManager</code> property with the main configuration object</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 operator">...</span>
|
|
<span class="token literal-property property">assetManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">assets</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>You can update most of them later by using <code>getConfig</code> inside of the module</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> amConfig <span class="token operator">=</span> editor<span class="token punctuation">.</span>AssetManager<span class="token punctuation">.</span><span class="token function">getConfig</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Check the full list of available options here: <a href="https://github.com/GrapesJS/grapesjs/blob/master/src/asset_manager/config/config.ts" target="_blank" rel="noopener noreferrer">Asset Manager Config<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> <h2 id="initialization"><a href="#initialization" class="header-anchor">#</a> Initialization</h2> <p>The Asset Manager is ready to work by default, so pass few URLs to see them loaded</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 operator">...</span>
|
|
<span class="token literal-property property">assetManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">assets</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token string">'http://placehold.it/350x250/78c5d6/fff/image1.jpg'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// Pass an object with your properties</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'http://placehold.it/350x250/459ba8/fff/image2.jpg'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">350</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">250</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'displayName'</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token comment">// As the 'image' is the base type of assets, omitting it will</span>
|
|
<span class="token comment">// be set as `image` by default</span>
|
|
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'http://placehold.it/350x250/79c267/fff/image3.jpg'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">350</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">250</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'displayName'</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>If you want a complete list of available properties check out the source <a href="https://github.com/GrapesJS/grapesjs/blob/dev/src/asset_manager/model/AssetImage.js" target="_blank" rel="noopener noreferrer">AssetImage Model<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> <p>The built-in Asset Manager modal is implemented and is showing up when requested. By default, you can make it appear by dragging Image Components in canvas, double clicking on images and all other stuff related to images (eg. CSS styling)</p> <img src="/docs/assets-builtin-modal.png"> <h2 id="uploading-assets"><a href="#uploading-assets" class="header-anchor">#</a> Uploading assets</h2> <p>The default Asset Manager includes also an easy to use, drag-and-drop uploader with a few UI helpers. The default uploader is already visible when you open the Asset Manager.</p> <img src="/docs/assets-uploader.png"> <p>You can click on the uploader to select your files or just drag them directly from your computer to trigger the uploader. Obviously, before it will work you have to setup your server to receive your assets and specify the upload endpoint in your configuration</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 operator">...</span>
|
|
<span class="token literal-property property">assetManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token comment">// Upload endpoint, set `false` to disable upload, default `false`</span>
|
|
<span class="token literal-property property">upload</span><span class="token operator">:</span> <span class="token string">'https://endpoint/upload/assets'</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// The name used in POST to pass uploaded files, default: `'files'`</span>
|
|
<span class="token literal-property property">uploadName</span><span class="token operator">:</span> <span class="token string">'files'</span><span class="token punctuation">,</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="listeners"><a href="#listeners" class="header-anchor">#</a> Listeners</h3> <p>If you want to execute an action before/after the uploading process (eg. loading animation) or even on response, you can make use of these listeners</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// The upload is started</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'asset:upload:start'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token function">startAnimation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// The upload is ended (completed or not)</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'asset:upload:end'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token function">endAnimation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Error handling</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'asset:upload:error'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token function">notifyError</span><span class="token punctuation">(</span>err<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">// Do something on response</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'asset:upload:response'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">response</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token operator">...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h3 id="response"><a href="#response" class="header-anchor">#</a> Response</h3> <p>When the uploading is over, by default (via config parameter <code>autoAdd: 1</code>), the editor expects to receive a JSON of uploaded assets in a <code>data</code> key as a response and tries to add them to the main collection. The JSON might look like this:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span>
|
|
<span class="token string">'https://.../image.png'</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'https://.../image2.png'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">]</span>
|
|
<span class="token punctuation">}</span>
|
|
</code></pre></div> <h2 id="programmatic-usage"><a href="#programmatic-usage" class="header-anchor">#</a> Programmatic usage</h2> <p>If you need to manage your assets programmatically you have to use its <a href="/docs/api/assets.html">APIs</a></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Get the Asset Manager module first</span>
|
|
<span class="token keyword">const</span> am <span class="token operator">=</span> editor<span class="token punctuation">.</span>AssetManager<span class="token punctuation">;</span>
|
|
</code></pre></div><p>First of all, it's worth noting that Asset Manager keeps 2 collections of assets:</p> <ul><li><strong>global</strong> - which is just the one with all available assets, you can get it with <code>am.getAll()</code></li> <li><strong>visible</strong> - this is the collection which is currently rendered by the Asset Manager, you get it with <code>am.getAllVisible()</code></li></ul> <p>This allows you to decide which assets to show and when. Let's say we'd like to have a category switcher, first of all you gonna add to the <strong>global</strong> collection all your assets (which you may already defined at init by <code>config.assetManager.assets = [...]</code>)</p> <div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
|
<span class="token punctuation">{</span>
|
|
<span class="token comment">// You can pass any custom property you want</span>
|
|
<span class="token literal-property property">category</span><span class="token operator">:</span> <span class="token string">'c1'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'http://placehold.it/350x250/78c5d6/fff/image1.jpg'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">category</span><span class="token operator">:</span> <span class="token string">'c1'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'http://placehold.it/350x250/459ba8/fff/image2.jpg'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token literal-property property">category</span><span class="token operator">:</span> <span class="token string">'c2'</span><span class="token punctuation">,</span>
|
|
<span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'http://placehold.it/350x250/79c267/fff/image3.jpg'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Now if you call the <code>render()</code>, without an argument, you will see all the assets rendered</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// without any argument</span>
|
|
am<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
am<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// <- 3</span>
|
|
am<span class="token punctuation">.</span><span class="token function">getAllVisible</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// <- 3</span>
|
|
</code></pre></div><p>Ok, now let's show only assets form the first category</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> assets <span class="token operator">=</span> am<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
am<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>assets<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>
|
|
<span class="token parameter">asset</span> <span class="token operator">=></span> asset<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'category'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'c1'</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
am<span class="token punctuation">.</span><span class="token function">getAll</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// Still have 3 assets</span>
|
|
am<span class="token punctuation">.</span><span class="token function">getAllVisible</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token comment">// but only 2 are shown</span>
|
|
</code></pre></div><p>You can also mix arrays of assets</p> <div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token operator">...</span>assets1<span class="token punctuation">,</span> <span class="token operator">...</span>assets2<span class="token punctuation">,</span> <span class="token operator">...</span>assets3<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div> <p>In case you want to update or remove an asset, you can make use of this methods</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Get the asset via its `src`</span>
|
|
<span class="token keyword">const</span> asset <span class="token operator">=</span> am<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'http://.../img.jpg'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Update asset property</span>
|
|
asset<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'http://.../new-img.jpg'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Remove asset</span>
|
|
am<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span>asset<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// or via src, am.remove('http://.../new-img.jpg');</span>
|
|
</code></pre></div><p>For more APIs methods check out the <a href="/docs/api/assets.html">API Reference</a>.</p> <h3 id="custom-select-logic"><a href="#custom-select-logic" class="header-anchor">#</a> Custom select logic</h3> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>This section is referring to GrapesJS v0.17.26 or higher</p></div> <p>You can open the Asset Manager with your own select logic.</p> <div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token literal-property property">types</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'image'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// This is the default option</span>
|
|
<span class="token comment">// Without select, nothing will happen on asset selection</span>
|
|
<span class="token function">select</span><span class="token punctuation">(</span><span class="token parameter">asset<span class="token punctuation">,</span> complete</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> selected <span class="token operator">=</span> editor<span class="token punctuation">.</span><span class="token function">getSelected</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>selected <span class="token operator">&&</span> selected<span class="token punctuation">.</span><span class="token function">is</span><span class="token punctuation">(</span><span class="token string">'image'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
selected<span class="token punctuation">.</span><span class="token function">addAttributes</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">src</span><span class="token operator">:</span> asset<span class="token punctuation">.</span><span class="token function">getSrc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// The default AssetManager UI will trigger `select(asset, false)`</span>
|
|
<span class="token comment">// on asset click and `select(asset, true)` on double-click</span>
|
|
complete <span class="token operator">&&</span> am<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><h2 id="customization"><a href="#customization" class="header-anchor">#</a> Customization</h2> <p>The default Asset Manager UI is great for simple things, but except the possibility to tweak some CSS style, adding more complex things like a search input, filters, etc. requires a replace of the default UI.</p> <p>All you have to do is to indicate the editor your intent to use a custom UI and then subscribe to the <code>asset:custom</code> event that will give you all the information on any requested change.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">assetManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">custom</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
editor<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'asset:custom'</span><span class="token punctuation">,</span> <span class="token parameter">props</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// The `props` will contain all the information you need in order to update your UI.</span>
|
|
<span class="token comment">// props.open (boolean) - Indicates if the Asset Manager is open</span>
|
|
<span class="token comment">// props.assets (Array<Asset>) - Array of all assets</span>
|
|
<span class="token comment">// props.types (Array<String>) - Array of asset types requested, eg. ['image'],</span>
|
|
<span class="token comment">// props.close (Function) - A callback to close the Asset Manager</span>
|
|
<span class="token comment">// props.remove (Function<Asset>) - A callback to remove an asset</span>
|
|
<span class="token comment">// props.select (Function<Asset, boolean>) - A callback to select an asset</span>
|
|
<span class="token comment">// props.container (HTMLElement) - The element where you should append your UI</span>
|
|
|
|
<span class="token comment">// Here you would put the logic to render/update your UI.</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Here an example of using custom Asset Manager with a Vue component.</p> <iframe width="100%" height="500" src="//jsfiddle.net/artur_arseniev/wbj4tmqk/embedded/js,html,css,result/dark/?menuColor=fff&fontColor=333&accentColor=e67891" allowfullscreen="allowfullscreen" frameborder="0"></iframe> <p>The example above is the right way if you need to replace the default UI, but as you might notice we append the mounted element to the container <code>props.container.appendChild(this.$el);</code>.
|
|
This is required as the Asset Manager, by default, is placed in the <a href="/docs/modules/Modal.html">Modal</a>.</p> <p>How to approach the case when your Asset Manager is a completely independent/external module (eg. should be showed in its own custom modal)? Not a problem, you can bind the Asset Manager state via <code>assetManager.custom.open</code>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> editor <span class="token operator">=</span> grapesjs<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">assetManager</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token literal-property property">custom</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
|
<span class="token function">open</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// `props` are the same used in `asset:custom` event</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token comment">// Init and open your external Asset Manager</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token comment">// IMPORTANT:</span>
|
|
<span class="token comment">// When the external library is closed you have to comunicate</span>
|
|
<span class="token comment">// this state back to the editor, otherwise GrapesJS will think</span>
|
|
<span class="token comment">// the Asset Manager is still open.</span>
|
|
<span class="token comment">// example: myAssetManager.on('close', () => props.close())</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token function">close</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Close the external Asset Manager</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>It's important to declare also the <code>close</code> function, the editor should be able to close the Asset Manager via <code>am.close()</code>.</p> <h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>For a complete list of available events, you can check it <a href="/docs/api/assets.html#available-events">here</a>.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/artf/grapesjs/edit/dev/docs/modules/Assets.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">3/11/2023, 3:57:01 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|
←
|
|
<a href="/docs/modules/Blocks.html" class="prev">
|
|
Blocks
|
|
</a></span> <span class="next"><a href="/docs/modules/Commands.html">
|
|
Commands
|
|
</a>
|
|
→
|
|
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|
<script src="/docs/assets/js/app.7cba500a.js" defer></script><script src="/docs/assets/js/4.0070552e.js" defer></script><script src="/docs/assets/js/2.6fefd022.js" defer></script><script src="/docs/assets/js/1.d23e9fed.js" defer></script><script src="/docs/assets/js/80.43bf5b47.js" defer></script><script src="/docs/assets/js/33.a739af41.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|