## BlockManager
- [add][1]
- [get][2]
- [getAll][3]
- [getAllVisible][4]
- [getCategories][5]
- [getContainer][6]
- [render][7]
Block manager helps managing various, draggable, piece of contents that could be easily reused inside templates.
Before using methods you should get first the module from the editor instance, in this way:
```js
var blockManager = editor.BlockManager;
```
### Parameters
- `config` **[Object][8]** Configurations
- `config.blocks` **[Array][9]<[Object][8]>** Default blocks (optional, default `[]`)
### Examples
```javascript
...
{
blocks: [
{id:'h1-block' label: 'Heading', content:'...
'},
...
],
}
...
```
## getConfig
Get configuration object
Returns **[Object][8]**
## onLoad
Load default blocks if the collection is empty
## add
Add new block to the collection.
### Parameters
- `id` **[string][10]** Block id
- `opts` **[Object][8]** Options
- `opts.label` **[string][10]** Name of the block
- `opts.content` **[string][10]** HTML content
- `opts.category` **([string][10] \| [Object][8])** 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][8]** Block attributes (optional, default `{}`)
### Examples
```javascript
blockManager.add('h1-block', {
label: 'Heading',
content: 'Put your title here
',
category: 'Basic',
attributes: {
title: 'Insert h1 block'
}
});
```
Returns **Block** Added block
## get
Return the block by id
### Parameters
- `id` **[string][10]** Block id
### Examples
```javascript
const block = blockManager.get('h1-block');
console.log(JSON.stringify(block));
// {label: 'Heading', content: 'Put your ...', ...}
```
## getAll
Return all blocks
### Examples
```javascript
const blocks = blockManager.getAll();
console.log(JSON.stringify(blocks));
// [{label: 'Heading', content: '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][10]** Block id
Returns **Block** Removed block
## getCategories
Get all available categories.
It's possible to add categories only within blocks via 'add()' method
Returns **([Array][9] | Collection)**
## getContainer
Return the Blocks container element
Returns **[HTMLElement][11]**
## render
Render blocks
### Parameters
- `blocks` **[Array][9]** Blocks to render, without the argument will render
all global blocks
### Examples
```javascript
// Render all blocks (inside the global collection)
blockManager.render();
// Render new set of blocks
const blocks = blockManager.getAll();
blockManager.render(blocks.filter(
block => block.get('category') == 'sections'
));
// Or a new set from an array
blockManager.render([
{label: 'Label text', content: '
Content
'}
]);
// Back to blocks from the global collection
blockManager.render();
```
Returns **[HTMLElement][11]** Rendered element
[1]: #add
[2]: #get
[3]: #getall
[4]: #getallvisible
[5]: #getcategories
[6]: #getcontainer
[7]: #render
[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[11]: https://developer.mozilla.org/docs/Web/HTML/Element