# BlockManager
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({
blockManager: {
// options
}
})
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
const blockManager = editor.BlockManager;
# getConfig
Get configuration object
Returns Object (opens new window)
# onLoad
Load default blocks if the collection is empty
# add
Add new block to the collection.
# Parameters
id
string (opens new window) Block idopts
Object (opens new window) Optionsopts.label
string (opens new window) Name of the blockopts.content
string (opens new window) HTML contentopts.category
(string (opens new window) | Object (opens new window)) Group the block inside a catgegory. You should pass objects with id property, eg: {id: 'some-uid', label: 'My category'} The string will be converted in: 'someid' => {id: 'someid', label: 'someid'}opts.attributes
Object (opens new window) Block attributes (optional, default{}
)
# Examples
blockManager.add('h1-block', {
label: 'Heading',
content: '<h1>Put your title here</h1>',
category: 'Basic',
attributes: {
title: 'Insert h1 block'
}
});
Returns Block Added block
# get
Return the block by id
# Parameters
id
string (opens new window) Block id
# Examples
const block = blockManager.get('h1-block');
console.log(JSON.stringify(block));
// {label: 'Heading', content: '<h1>Put your ...', ...}
# getAll
Return all blocks
# Examples
const blocks = blockManager.getAll();
console.log(JSON.stringify(blocks));
// [{label: 'Heading', content: '<h1>Put your ...'}, ...]
Returns Collection
# getAllVisible
Return the visible collection, which containes blocks actually rendered
Returns Collection
# remove
Remove a block by id
# Parameters
id
string (opens new window) Block id
# Examples
// Id of the block which need to be removed
const id = 'button';
blockManager.remove(id);
Returns Block Removed block
# getCategories
Get all available categories. It's possible to add categories only within blocks via 'add()' method
Returns (Array (opens new window) | Collection)
# getContainer
Return the Blocks container element
Returns HTMLElement (opens new window)
# render
Render blocks
# Parameters
blocks
Array (opens new window) Blocks to render, without the argument will render all global blocksopts
Object (opens new window) Options (optional, default{}
)opts.external
Boolean (opens new window)? Render blocks in a new container (HTMLElement will be returned)opts.ignoreCategories
Boolean (opens new window)? Render blocks without categories
# Examples
// Render all blocks (inside the global collection)
blockManager.render();
// Render new set of blocks
const blocks = blockManager.getAll();
const filtered = blocks.filter(block => block.get('category') == 'sections')
blockManager.render(filtered);
// Or a new set from an array
blockManager.render([
{label: 'Label text', content: '<div>Content</div>'}
]);
// Back to blocks from the global collection
blockManager.render();
// You can also render your blocks outside of the main block container
const newBlocksEl = blockManager.render(filtered, { external: true });
document.getElementById('some-id').appendChild(newBlocksEl);
Returns HTMLElement (opens new window) Rendered element