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;

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

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

// In case of strings, would be interpreted as images
assetManager.add('http://img.jpg');
assetManager.add(['http://img.jpg', './path/to/img.png']);

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

Returns Model

get

Returns the asset by URL

Parameters

• src string URL of the asset

Examples

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

Returns Object Object representing the asset

getAll

Return the global collection, containing all the assets

Returns Collection

getAllVisible

Return the visible collection, which containes assets actually rendered

Returns Collection

remove

Remove the asset by its URL

Parameters

• src string URL of the asset

Examples

assetManager.remove('http://img.jpg');

Returns this

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

• 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