# 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

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

# Parameters

# 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

# 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

# Examples

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

Returns this

# store

Store assets data to the selected storage

# Parameters

# 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

Returns Object Type definition

# getTypes

Get types

Returns Array