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.
372 lines
64 KiB
372 lines
64 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="description" content="GrapesJS documentation">
|
|
<link rel="icon" href="/docs/logo-icon.png">
|
|
<link rel="stylesheet" href="../stylesheets/grapes.min.css?v0.16.3">
|
|
<script src="../js/grapes.min.js?v0.16.3"></script>
|
|
|
|
<link rel="preload" href="/docs/assets/css/styles.e1f2d947.css" as="style"><link rel="preload" href="/docs/assets/js/app.e1f2d947.js" as="script"><link rel="preload" href="/docs/assets/js/36.67cb8d1f.js" as="script"><link rel="prefetch" href="/docs/assets/css/1.styles.b40e6662.css"><link rel="prefetch" href="/docs/assets/css/2.styles.896e948d.css"><link rel="prefetch" href="/docs/assets/css/3.styles.46968bd4.css"><link rel="prefetch" href="/docs/assets/css/4.styles.79691bb5.css"><link rel="prefetch" href="/docs/assets/css/5.styles.6013373a.css"><link rel="prefetch" href="/docs/assets/css/6.styles.467c19a2.css"><link rel="prefetch" href="/docs/assets/css/7.styles.ce9d181d.css"><link rel="prefetch" href="/docs/assets/css/8.styles.aae17ac6.css"><link rel="prefetch" href="/docs/assets/css/9.styles.e0170b17.css"><link rel="prefetch" href="/docs/assets/js/1.b40e6662.js"><link rel="prefetch" href="/docs/assets/js/10.e7cd7c26.js"><link rel="prefetch" href="/docs/assets/js/11.3f87b9b8.js"><link rel="prefetch" href="/docs/assets/js/12.269b5586.js"><link rel="prefetch" href="/docs/assets/js/13.e52ea678.js"><link rel="prefetch" href="/docs/assets/js/14.0606827a.js"><link rel="prefetch" href="/docs/assets/js/15.aa7f42f8.js"><link rel="prefetch" href="/docs/assets/js/16.959c0bd7.js"><link rel="prefetch" href="/docs/assets/js/17.bfba947e.js"><link rel="prefetch" href="/docs/assets/js/18.7f401ffb.js"><link rel="prefetch" href="/docs/assets/js/19.3e0ce3c8.js"><link rel="prefetch" href="/docs/assets/js/2.896e948d.js"><link rel="prefetch" href="/docs/assets/js/20.f4502040.js"><link rel="prefetch" href="/docs/assets/js/21.2babea6a.js"><link rel="prefetch" href="/docs/assets/js/22.26e5d9ed.js"><link rel="prefetch" href="/docs/assets/js/23.a2c9ec17.js"><link rel="prefetch" href="/docs/assets/js/24.f9675b16.js"><link rel="prefetch" href="/docs/assets/js/25.b52924ae.js"><link rel="prefetch" href="/docs/assets/js/26.81c00685.js"><link rel="prefetch" href="/docs/assets/js/27.7372785c.js"><link rel="prefetch" href="/docs/assets/js/28.df5c22ed.js"><link rel="prefetch" href="/docs/assets/js/29.b167a894.js"><link rel="prefetch" href="/docs/assets/js/3.46968bd4.js"><link rel="prefetch" href="/docs/assets/js/30.d165faf7.js"><link rel="prefetch" href="/docs/assets/js/31.334d7953.js"><link rel="prefetch" href="/docs/assets/js/32.f9daa2c8.js"><link rel="prefetch" href="/docs/assets/js/33.93f49bfa.js"><link rel="prefetch" href="/docs/assets/js/34.4865e6c3.js"><link rel="prefetch" href="/docs/assets/js/35.9d089775.js"><link rel="prefetch" href="/docs/assets/js/37.708a94ac.js"><link rel="prefetch" href="/docs/assets/js/38.0f8df29b.js"><link rel="prefetch" href="/docs/assets/js/39.074f3faf.js"><link rel="prefetch" href="/docs/assets/js/4.79691bb5.js"><link rel="prefetch" href="/docs/assets/js/40.cef45f06.js"><link rel="prefetch" href="/docs/assets/js/41.c734b929.js"><link rel="prefetch" href="/docs/assets/js/42.1078a060.js"><link rel="prefetch" href="/docs/assets/js/43.7188da01.js"><link rel="prefetch" href="/docs/assets/js/44.1fd52e91.js"><link rel="prefetch" href="/docs/assets/js/45.69c67864.js"><link rel="prefetch" href="/docs/assets/js/5.6013373a.js"><link rel="prefetch" href="/docs/assets/js/6.467c19a2.js"><link rel="prefetch" href="/docs/assets/js/7.ce9d181d.js"><link rel="prefetch" href="/docs/assets/js/8.aae17ac6.js"><link rel="prefetch" href="/docs/assets/js/9.e0170b17.js">
|
|
<link rel="stylesheet" href="/docs/assets/css/styles.e1f2d947.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" 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
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></nav></div></header><div class="sidebar-mask"></div><div 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
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></div><div class="nav-item"><a href="https://twitter.com/grapesjs" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Twitter
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></div><a href="https://github.com/artf/grapesjs" target="_blank" rel="noopener noreferrer" class="repo-link">
|
|
GitHub
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></nav><div id="native-carbon" class="carbon-ads"></div><ul class="sidebar-links"><li><a href="/docs/" class="sidebar-link">Introduction</a></li><li><a href="/docs/getting-started.html" class="sidebar-link">Getting Started</a></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Modules</span><!----></p><ul class="sidebar-group-items"><li><a href="/docs/modules/Assets.html" 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#customization" class="sidebar-link">Customization</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#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/docs/modules/Blocks.html" class="sidebar-link">Blocks</a></li><li><a href="/docs/modules/Commands.html" class="sidebar-link">Commands</a></li><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/I18n.html" class="sidebar-link">I18n</a></li><li><a href="/docs/modules/Traits.html" class="sidebar-link">Traits</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/Plugins.html" class="sidebar-link">Plugins</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Guides</span><!----></p><ul class="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></div></li></ul></div><div class="page"><div class="content"><h1 id="asset-manager"><a href="#asset-manager" aria-hidden="true" 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="#customization">Customization</a><ul><li><a href="#define-new-asset-type">Define new Asset type</a></li><li><a href="#extend-asset-types">Extend Asset Types</a></li></ul></li><li><a href="#uploading-assets">Uploading assets</a><ul><li><a href="#listeners">Listeners</a></li><li><a href="#response">Response</a></li><li><a href="#setup-dropzone">Setup Dropzone</a></li></ul></li><li><a href="#events">Events</a></li></ul></div><p></p><h2 id="configuration"><a href="#configuration" aria-hidden="true" class="header-anchor">#</a> Configuration</h2><p>To change default configurations you'll have to pass <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>
|
|
assetManager<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
assets<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 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>Below is a list of currently available options</p><div class="language-js extra-class"><pre class="language-js"><code> <span class="token comment">// Default assets</span>
|
|
<span class="token comment">// eg. [</span>
|
|
<span class="token comment">// 'https://...image1.png',</span>
|
|
<span class="token comment">// 'https://...image2.png',</span>
|
|
<span class="token comment">// {type: 'image', src: 'https://...image3.png', someOtherCustomProp: 1},</span>
|
|
<span class="token comment">// ..</span>
|
|
<span class="token comment">// ]</span>
|
|
assets<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Content to add where there is no assets to show</span>
|
|
<span class="token comment">// eg. 'No <b>assets</b> here, drag to upload'</span>
|
|
noAssets<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Upload endpoint, set `false` to disable upload</span>
|
|
<span class="token comment">// upload: 'https://endpoint/upload/assets',</span>
|
|
<span class="token comment">// upload: false,</span>
|
|
upload<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// The name used in POST to pass uploaded files</span>
|
|
uploadName<span class="token punctuation">:</span> <span class="token string">'files'</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Custom headers to pass with the upload request</span>
|
|
headers<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 parameters to pass with the upload request, eg. csrf token</span>
|
|
params<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 credentials setting for the upload request, eg. 'include', 'omit'</span>
|
|
credentials<span class="token punctuation">:</span> <span class="token string">'include'</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Allow uploading multiple files per request.</span>
|
|
<span class="token comment">// If disabled filename will not have '[]' appended</span>
|
|
multiUpload<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// If true, tries to add automatically uploaded assets.</span>
|
|
<span class="token comment">// To make it work the server should respond with a JSON containing assets</span>
|
|
<span class="token comment">// in a data key, eg:</span>
|
|
<span class="token comment">// {</span>
|
|
<span class="token comment">// data: [</span>
|
|
<span class="token comment">// 'https://.../image.png',</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token comment">// {src: 'https://.../image2.png'},</span>
|
|
<span class="token comment">// ...</span>
|
|
<span class="token comment">// ]</span>
|
|
<span class="token comment">// }</span>
|
|
autoAdd<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Text on upload input</span>
|
|
uploadText<span class="token punctuation">:</span> <span class="token string">'Drop files here or click to upload'</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Label for the add button</span>
|
|
addBtnText<span class="token punctuation">:</span> <span class="token string">'Add image'</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Custom uploadFile function</span>
|
|
<span class="token comment">// @example</span>
|
|
<span class="token comment">// uploadFile: (e) => {</span>
|
|
<span class="token comment">// var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;</span>
|
|
<span class="token comment">// // ...send somewhere</span>
|
|
<span class="token comment">// }</span>
|
|
uploadFile<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Handle the image url submit from the built-in 'Add image' form</span>
|
|
<span class="token comment">// @example</span>
|
|
<span class="token comment">// handleAdd: (textFromInput) => {</span>
|
|
<span class="token comment">// // some check...</span>
|
|
<span class="token comment">// editor.AssetManager.add(textFromInput);</span>
|
|
<span class="token comment">// }</span>
|
|
handleAdd<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Enable an upload dropzone on the entire editor (not document) when dragging</span>
|
|
<span class="token comment">// files over it</span>
|
|
dropzone<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Open the asset manager once files are been dropped via the dropzone</span>
|
|
openAssetsOnDrop<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Any dropzone content to append inside dropzone element</span>
|
|
dropzoneContent<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// Default title for the asset manager modal</span>
|
|
modalTitle<span class="token punctuation">:</span> <span class="token string">'Select Image'</span><span class="token punctuation">,</span>
|
|
</code></pre></div><p>Sometimes the code gets ahead of the docs, therefore we'd suggest to keep an eye at the current state of configurations by checking the dedicated source file <a href="https://github.com/artf/grapesjs/blob/dev/src/asset_manager/config/config.js" target="_blank" rel="noopener noreferrer">Asset Manager Config<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></a></p><h2 id="initialization"><a href="#initialization" aria-hidden="true" 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>
|
|
assetManager<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
assets<span class="token punctuation">:</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>
|
|
type<span class="token punctuation">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span>
|
|
src<span class="token punctuation">:</span> <span class="token string">'http://placehold.it/350x250/459ba8/fff/image2.jpg'</span><span class="token punctuation">,</span>
|
|
height<span class="token punctuation">:</span> <span class="token number">350</span><span class="token punctuation">,</span>
|
|
width<span class="token punctuation">:</span> <span class="token number">250</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>
|
|
src<span class="token punctuation">:</span> <span class="token string">'http://placehold.it/350x250/79c267/fff/image3.jpg'</span><span class="token punctuation">,</span>
|
|
height<span class="token punctuation">:</span> <span class="token number">350</span><span class="token punctuation">,</span>
|
|
width<span class="token punctuation">:</span> <span class="token number">250</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/artf/grapesjs/blob/dev/src/asset_manager/model/AssetImage.js" target="_blank" rel="noopener noreferrer">AssetImage Model<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></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"><p>Making the modal appear is registered with a command, so you can make it appear with this</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// This command shows only assets with `image` type</span>
|
|
editor<span class="token punctuation">.</span><span class="token function">runCommand</span><span class="token punctuation">(</span><span class="token string">'open-assets'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Worth nothing that by doing this you can't do much with assets (if you double click on them nothing happens) and this is because you've not indicated any target. Try just to select an image in your canvas and run this in console (you should first make the editor globally available <code>window.editor = editor;</code> in your script)</p><div class="language-js extra-class"><pre class="language-js"><code>editor<span class="token punctuation">.</span><span class="token function">runCommand</span><span class="token punctuation">(</span><span class="token string">'open-assets'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
target<span class="token punctuation">:</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 punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>Now you should be able to change the image of the component.</p><h2 id="customization"><a href="#customization" aria-hidden="true" class="header-anchor">#</a> Customization</h2><p>If you want to customize the Asset Manager after the initialization you have to use its <a href="API-Asset-Manager">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 nothing 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>
|
|
category<span class="token punctuation">:</span> <span class="token string">'c1'</span><span class="token punctuation">,</span>
|
|
src<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 punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
category<span class="token punctuation">:</span> <span class="token string">'c1'</span><span class="token punctuation">,</span>
|
|
src<span class="token punctuation">:</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>
|
|
category<span class="token punctuation">:</span> <span class="token string">'c2'</span><span class="token punctuation">,</span>
|
|
src<span class="token punctuation">:</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>If you want to customize the asset manager container you can get its <code>HTMLElement</code></p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">getContainer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">insertAdjacentHTML</span><span class="token punctuation">(</span><span class="token string">'afterbegin'</span><span class="token punctuation">,</span> <span class="token string">'<div><button type="button">Click</button></div>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>For more APIs methods check out the <a href="API-Asset-Manager">API Reference</a></p><h3 id="define-new-asset-type"><a href="#define-new-asset-type" aria-hidden="true" class="header-anchor">#</a> Define new Asset type</h3><p>Generally speaking, images aren't the only asset you'll use, it could be a <code>video</code>, <code>svg-icon</code>, or any other kind of <code>document</code>. Each type of asset is applied in our templates/pages differently. If you need to change the image of the Component all you need is another <code>url</code> in <code>src</code> attribute. However In case of a <code>svg-icon</code>, its not the same, you might want to replace the element with a new <code><svg></code> content. Besides this you also have to deal with the presentation/preview of the asset inside the panel/modal. For example, showing a thumbnail for big images or the possibility to preview videos.</p><p>Defining a new asset it means we have to push on top of the 'Stack of Types' a new layer. This stack is iterated over by the editor at any addition of the asset and tries to associate the correct type.</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 string">'https://.../image.png'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// string, url, ends with '.png' -> it's an 'image' type</span>
|
|
|
|
am<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">'<svg ...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// string and starts with '<svg...' -> 'svg' type</span>
|
|
|
|
am<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">{</span>type<span class="token punctuation">:</span> <span class="token string">'video'</span><span class="token punctuation">,</span> src<span class="token punctuation">:</span> <span class="token string">'...'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token comment">// an object, has 'video' type key -> 'video' type</span>
|
|
</code></pre></div><p>It's up to you tell the editor how to recognize your type and for this purpose you should to use <code>isType()</code> method.
|
|
Let's see now an example of how we'd start to defining a type like <code>svg-icon</code></p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'svg-icon'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// `value` is for example the argument passed in `am.add(VALUE);`</span>
|
|
<span class="token function">isType</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// The condition is intentionally simple</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>value<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'<svg '</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
|
type<span class="token punctuation">:</span> <span class="token string">'svg-icon'</span><span class="token punctuation">,</span>
|
|
svgContent<span class="token punctuation">:</span> value
|
|
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token comment">// Maybe you pass the `svg-icon` object already</span>
|
|
<span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> value <span class="token operator">==</span> <span class="token string">'object'</span> <span class="token operator">&&</span> value<span class="token punctuation">.</span>type <span class="token operator">==</span> <span class="token string">'svg-icon'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> value<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>With this snippet you can already add SVGs, the asset manager will assign the appropriate type.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Add some random SVG</span>
|
|
am<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z"></path>
|
|
<polygon points="4 10 5 10 5 14 4 14"></polygon>
|
|
</svg>`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>The default <code>open-assets</code> command shows only <code>image</code> assets, so to render <code>svg-icon</code> run this</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>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><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">'type'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'svg-icon'</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
</code></pre></div><p>You should see something like this</p><img src="/docs/assets-empty-view.png"><p>The SVG asset is not rendered correctly and this is because we haven't yet configured its view</p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'svg-icon'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
view<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// `getPreview()` and `getInfo()` are just few helpers, you can</span>
|
|
<span class="token comment">// override the entire template with `template()`</span>
|
|
<span class="token comment">// Check the base `template()` here:</span>
|
|
<span class="token comment">// https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/AssetView.js</span>
|
|
<span class="token function">getPreview</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token template-string"><span class="token string">`<div style="text-align: center"></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'svgContent'</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"></div>`</span></span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token function">getInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// You can use model's properties if you passed them:</span>
|
|
<span class="token comment">// am.add({</span>
|
|
<span class="token comment">// type: 'svg-icon',</span>
|
|
<span class="token comment">// svgContent: '<svg ...',</span>
|
|
<span class="token comment">// name: 'Some name'</span>
|
|
<span class="token comment">// })</span>
|
|
<span class="token comment">// ... then</span>
|
|
<span class="token comment">// this.model.get('name');</span>
|
|
<span class="token keyword">return</span> <span class="token string">'<div>SVG description</div>'</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 function">isType</span><span class="token punctuation">(</span><span class="token parameter">value</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><p>This is the result</p><img src="/docs/assets-svg-view.png"><p>Now we have to deal with how to assign our <code>svgContent</code> to the selected element</p><div class="language-js extra-class"><pre class="language-js"><code>am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'svg-icon'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
view<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// In our case the target is the selected component</span>
|
|
<span class="token function">updateTarget</span><span class="token punctuation">(</span><span class="token parameter">target</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">const</span> svg <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'svgContent'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Just to make things bit interesting, if it's an image type</span>
|
|
<span class="token comment">// I put the svg as a data uri, content otherwise</span>
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span>target<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'type'</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">'image'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// Tip: you can also use `data:image/svg+xml;utf8,<svg ...` but you</span>
|
|
<span class="token comment">// have to escape few chars</span>
|
|
target<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">,</span> <span class="token template-string"><span class="token string">`data:mime/type;base64,</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">btoa</span><span class="token punctuation">(</span>svg<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
|
|
target<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token string">'content'</span><span class="token punctuation">,</span> svg<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 operator">...</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token function">isType</span><span class="token punctuation">(</span><span class="token parameter">value</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><p>Our custom <code>svg-icon</code> asset is ready to use. You can also add a <code>model</code> to the <code>addType</code> definition to group the business logic of your asset, but usually it's optional.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Just an example of model use</span>
|
|
am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'svg-icon'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
model<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// With `default` you define model's default properties</span>
|
|
defaults<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
type<span class="token punctuation">:</span> <span class="token string">'svg-icon'</span><span class="token punctuation">,</span>
|
|
svgContent<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
|
|
name<span class="token punctuation">:</span> <span class="token string">'Default SVG Name'</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
|
|
<span class="token comment">// You can call model's methods inside views:</span>
|
|
<span class="token comment">// const name = this.model.getName();</span>
|
|
<span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'name'</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>
|
|
view<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 function">isType</span><span class="token punctuation">(</span><span class="token parameter">value</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="extend-asset-types"><a href="#extend-asset-types" aria-hidden="true" class="header-anchor">#</a> Extend Asset Types</h3><p>Extending asset types is basically the same as adding them, you can choose what type to extend and how.</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// svgIconType will contain the definition (model, view, isType)</span>
|
|
<span class="token keyword">const</span> svgIconType <span class="token operator">=</span> am<span class="token punctuation">.</span><span class="token function">getType</span><span class="token punctuation">(</span><span class="token string">'svg-icon'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
|
|
<span class="token comment">// Add new type and extend another one</span>
|
|
am<span class="token punctuation">.</span><span class="token function">addType</span><span class="token punctuation">(</span><span class="token string">'svg-icon2'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
view<span class="token punctuation">:</span> svgIconType<span class="token punctuation">.</span>view<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
<span class="token function">getInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token string">'<div>SVG2 description</div>'</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 `isType` is important, but if you omit it the default one will be added</span>
|
|
<span class="token comment">// isType(value) {</span>
|
|
<span class="token comment">// if (value && value.type == id) {</span>
|
|
<span class="token comment">// return {type: value.type};</span>
|
|
<span class="token comment">// }</span>
|
|
<span class="token comment">// };</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
</code></pre></div><p>You can also extend the already defined types (to be sure to load assets with the old type extended create a plugin for your definitions)</p><div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// Extend the original `image` and add a confirm dialog before removing it</span>
|
|
am<span class="token punctuation">.</span><span class="token function">addType</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">// As you adding on top of an already defined type you can avoid indicating</span>
|
|
<span class="token comment">// `am.getType('image').view.extend({...` the editor will do it by default</span>
|
|
<span class="token comment">// but you can eventually extend some other type</span>
|
|
view<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token comment">// If you want to see more methods to extend check out</span>
|
|
<span class="token comment">// https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/AssetImageView.js</span>
|
|
<span class="token function">onRemove</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
e<span class="token punctuation">.</span><span class="token function">stopPropagation</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">const</span> model <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>model<span class="token punctuation">;</span>
|
|
|
|
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'Are you sure?'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
model<span class="token punctuation">.</span>collection<span class="token punctuation">.</span><span class="token function">remove</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><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|
</code></pre></div><h2 id="uploading-assets"><a href="#uploading-assets" aria-hidden="true" class="header-anchor">#</a> Uploading assets</h2><p>Asset Manager includes 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">let</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>
|
|
assetManager<span class="token punctuation">:</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>
|
|
upload<span class="token punctuation">:</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>
|
|
uploadName<span class="token punctuation">:</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" aria-hidden="true" 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 operator">...</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 operator">...</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 operator">...</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" aria-hidden="true" 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 blob 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>
|
|
data<span class="token punctuation">:</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>
|
|
src<span class="token punctuation">:</span> <span class="token string">'https://.../image2.png'</span><span class="token punctuation">,</span>
|
|
type<span class="token punctuation">:</span> <span class="token string">'image'</span><span class="token punctuation">,</span>
|
|
height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
|
width<span class="token punctuation">:</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><h3 id="setup-dropzone"><a href="#setup-dropzone" aria-hidden="true" class="header-anchor">#</a> Setup Dropzone</h3><p>There is another helper which improves the uploading of assets: A full-width editor dropzone.</p><img src="/docs/assets-full-dropzone.gif"><p>All you have to do is to activate it and possibly set a custom content (you might also want to hide the default uploader)</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>
|
|
assetManager<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
<span class="token operator">...</span><span class="token punctuation">,</span>
|
|
dropzone<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
|
dropzoneContent<span class="token punctuation">:</span> <span class="token string">'<div class="dropzone-inner">Drop here your assets</div>'</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="events"><a href="#events" aria-hidden="true" class="header-anchor">#</a> Events</h2><p>Currently available events you can listen to</p><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></div><div 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><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><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></div><div class="last-updated"><span class="prefix">Last Updated: </span><span class="time">10/26/2018, 1:52:41 PM</span></div></div><div class="page-nav"><p class="inner"><span class="prev">
|
|
← <a href="/docs/getting-started.html" class="prev">
|
|
Getting Started
|
|
</a></span><span class="next"><a href="/docs/modules/Blocks.html">
|
|
Blocks
|
|
</a> →
|
|
</span></p></div></div></div></div>
|
|
<script src="/docs/assets/js/app.e1f2d947.js" defer></script><script src="/docs/assets/js/36.67cb8d1f.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|