GrapesJS

# Assets

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

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 New asset added to the collection. The Asset is passed as an argument to the callback.
editor.on('asset:add', (asset) => { ... });
  • asset:remove Asset removed from the collection. The Asset is passed as an argument to the callback.
editor.on('asset:remove', (asset) => { ... });
  • asset:update Asset updated. The Asset and the object containing changes are passed as arguments to the callback.
editor.on('asset:update', (asset, updatedProps) => { ... });
  • asset:open Asset Manager opened.
editor.on('asset:open', () => { ... });
  • asset:close Asset Manager closed.
editor.on('asset:close', () => { ... });
  • asset:upload:start Asset upload start.
editor.on('asset:upload:start', () => { ... });
  • asset:upload:end Asset upload end.
editor.on('asset:upload:end', (result) => { ... });
  • asset:upload:error Asset upload error.
editor.on('asset:upload:error', (error) => { ... });
  • asset:upload:response Asset upload response.
editor.on('asset:upload:response', (res) => { ... });

editor.on('asset:custom', ({ container, assets, ... }) => { ... });
  • 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.
editor.on('asset', ({ event, model, ... }) => { ... });

# Methods

# open

Open the asset manager.

# Parameters

# Examples

assetManager.open({
 select(asset, complete) {
   const selected = editor.getSelected();
   if (selected && selected.is('image')) {
     selected.addAttributes({ src: asset.getSrc() });
     // The default AssetManager UI will trigger `select(asset, false)` on asset click
     // and `select(asset, true)` on double-click
     complete && assetManager.close();
   }
 }
});
// with your custom types (you should have assets with those types declared)
assetManager.open({ types: ['doc'], ... });

# close

Close the asset manager.

# Examples

assetManager.close();

# isOpen

Checks if the asset manager is open

# Examples

assetManager.isOpen(); // true | false

Returns Boolean (opens new window)

# add

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

# Parameters

# 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

# Examples

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

Returns (Asset | null)

# 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

# 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

# getContainer

Return the Asset Manager Container

Returns HTMLElement (opens new window)

← ‍ ‍ ‍ Asset →