grapesjs/docs/api/assets.md

AssetManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
 assetManager: {
   // options
 }
})

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const assetManager = editor.AssetManager;

Available Events

• asset:add - Added new asset. The Asset is passed as an argument to the callback.
• asset:remove - Asset removed. The Asset is passed as an argument to the callback.
• asset:update - Asset updated. The updated Asset and the object containing changes are passed as arguments to the callback.
• asset:upload:start - Before the upload is started.
• asset:upload:end - After the upload is ended.
• asset:upload:error - On any error in upload, passes the error as an argument.
• asset:upload:response - On upload response, passes the result as an argument.
• asset - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.

Methods

• add
• get
• getAll
• getAllVisible
• remove
• store
• load
• getContainer
• getAssetsEl
• addType
• getType
• getTypes

open

Open the asset manager.

Parameters

• options Object? Options for the asset manager. (optional, default {})

  • options.types Array<String> Types of assets to show. (optional, default ['image'])

Examples

assetManager.open();
// with your custom types (you should have assets with those types declared)
assetManager.open({ types: ['doc'] });

close

Close the asset manager.

Examples

assetManager.close();

add

Add new asset/s to the collection. URLs are supposed to be unique

Parameters

• asset (String | Object | Array<String> | Array<Object>) URL strings or an objects representing the resource.
• opts Object? Options (optional, default {})

Examples

// As strings
assetManager.add('http://img.jpg');
assetManager.add(['http://img.jpg', './path/to/img.png']);

// Using objects you can indicate the type and other meta informations
assetManager.add({
 // type: 'image',	// image is default
	src: 'http://img.jpg',
	height: 300,
width: 200,
});
assetManager.add([{ src: 'img2.jpg' }, { src: 'img2.png' }]);

Returns Asset

get

Return asset by URL

Parameters

• src String URL of the asset

Examples

const asset = assetManager.get('http://img.jpg');

Returns (Asset | null) Object representing the asset

getAll

Return the global collection, containing all the assets

Returns Collection<Asset>

getAllVisible

Return the visible collection, which contains assets actually rendered

Returns Collection<Asset>

remove

Remove asset

Parameters

• asset (String | Asset) Asset or asset URL
• opts

Examples

const removed = assetManager.remove('http://img.jpg');
// or by passing the Asset
const asset = assetManager.get('http://img.jpg');
assetManager.remove(asset);

Returns Asset Removed asset

store

Store assets data to the selected storage

Parameters

• noStore Boolean If true, won't store

Examples

var assets = assetManager.store();

Returns Object Data to store

load

Load data from the passed object. The fetched data will be added to the collection.

Parameters

• data Object Object of data to load (optional, default {})

Examples

var assets = assetManager.load({
	assets: [...]
})

Returns Object Loaded assets

getContainer

Return the Asset Manager Container

Returns HTMLElement

getAssetsEl

Get assets element container

Returns HTMLElement

render

Render assets

Parameters

• assts
• assets array Assets to render, without the argument will render all global assets

Examples

// Render all assets
assetManager.render();

// Render some of the assets
const assets = assetManager.getAll();
assetManager.render(assets.filter(
 asset => asset.get('category') == 'cats'
));

Returns HTMLElement

addType

Add new type. If you want to get more about type definition we suggest to read the module's page

Parameters

• id string Type ID
• definition Object Definition of the type. Each definition contains model (business logic), view (presentation logic) and isType function which recognize the type of the passed entity

Examples

assetManager.addType('my-type', {
 model: {},
 view: {},
 isType: (value) => {},
})

getType

Get type

Parameters

• id string Type ID

Returns Object Type definition

getTypes

Get types

Returns Array