@ -18,6 +18,16 @@ Once the editor is instantiated you can use its API. Before using these methods
const blockManager = editor.BlockManager;
const blockManager = editor.BlockManager;
```
```
## Available Events
* `block:add` - New block added
* `block:remove` - Block removed
* `block:drag:start` - Started dragging block, model of the block is passed as an argument
* `block:drag` - Dragging block, the block's model and the drag event are passed as arguments
* `block:drag:stop` - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block
* `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer
* `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer
* `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer
* `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer
### Blocks
* `block:add` - New block added
* `block:remove` - Block removed
* `block:drag:start` - Started dragging block, model of the block is passed as an argument
* `block:drag` - Dragging block, the block's model and the drag event are passed as arguments
* `block:drag:stop` - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block
### Keymaps
### Keymaps
* `keymap:add` - New keymap added. The new keyamp object is passed as an argument
* `keymap:add` - New keymap added. The new keyamp object is passed as an argument
@ -109,25 +101,29 @@ By changing `result.content` you're able to customize what is dropped
* `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback
* `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback
* `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback
* `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback
### Blocks
Check the [Blocks][2] module.
### Assets
### Assets
Check the [Assets][2] module.
Check the [Assets][3] module.
### Modal
### Modal
Check the [Modal][3] module.
Check the [Modal][4] module.
### Devices
### Devices
Check the [Devices][4] module.
Check the [Devices][5] module.
### Parser
### Parser
Check the [Parser][5] module.
Check the [Parser][6] module.
### Pages
### Pages
Check the [Pages][6] module.
Check the [Pages][7] module.
### General
### General
@ -143,7 +139,7 @@ Returns configuration object
### Parameters
### Parameters
* `prop`**[string][7]?** Property name
* `prop`**[string][8]?** Property name
Returns **any** Returns the configuration object or
Returns **any** Returns the configuration object or
the value of the specified property
the value of the specified property
@ -154,12 +150,12 @@ Returns HTML built inside canvas
@ -297,68 +297,11 @@ To know more about the available block properties, check the [Block API Referenc
## DONT PUT IDS in your content
The difference between components and blocks: The component is more atomic, so a single image, a text box or a map is a component. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).
## Events
Check out the [Components] page to see the list of built-in components and how to create your own.
For a complete list of available events, you can check it [here](/api/block_manager.html#available-events).
Let's see how to add a new block to the editor using the [Blocks API]
```js
var editor = grapesjs.init({...});
var blockManager = editor.BlockManager;
// 'my-first-block' is the ID of the block
blockManager.add('my-first-block', {
label: 'Simple block',
content: '<divclass="my-block">This is a simple block</div>',
});
```
With this snippet a new block will be added to the collection. You can also update existent blocks
```js
blockManager.get('my-first-block').set({
label: 'Updated simple block',
attributes: {
title: 'My title'
}
})
```
As you see a simple HTML string is enough to create a block, the editor will do the rest.
If you want you could also pass an object representing the [Component].
```js
blockManager.add('my-map-block', {
label: 'Simple map block',
content: {
type: 'map', // Built-in 'map' component
style: {
height: '350px'
},
removable: false, // Once inserted it can't be removed
}
})
```
From v0.3.70 it's also possible to pass the HTML string with Component's properties as attributes.
In the example above you're defining a row component which will accept only elements which match '.row-cell' selector and cells which could be dragged only inside '.row' elements. We're also defining the custom name which will be seen inside the Layers panel.
If you want to check the complete list of available Component's properties, check directly the Component model source:
Artur Arseniev
4 years ago