* [grapesjs-mjml](https://github.com/artf/grapesjs-mjml) - [Newsletter Builder with MJML](http://artf.github.io/grapesjs/demo-mjml.html)
You can actually use them as a starting point for your editors, so, just clone and extend them as you wish.
For a quick start with GrapesJS check the section below.
You can actually use them as a starting point for your editors, so, just follow the instructions on the repository to get a quick start for your builder.
@ -33,6 +32,8 @@ For a quick start with GrapesJS check the section below.
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
## $
## Editor
Editor class contains the top level API which you'll probably use to custom the editor or extend it with plugins.
You get the Editor instance on init method
Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.
You get the Editor instance on init method and you can pass options via its [Configuration Object][1]
```js
var editor = grapesjs.init({...});
const editor = grapesjs.init({
// options
});
```
# Available Events
## Available Events
You can make use of available events in this way
```js
editor.on('EVENT-NAME', (some, argument) => {
// do something
})
```
## Components
### Components
- `component:add` - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
- `component:remove` - Triggered when a component is removed, the model is passed as an argument to the callback
@ -24,7 +34,7 @@ var editor = grapesjs.init({...});
- `component:deselected` - Component deselected, the deselected model is passed as an argument to the callback
- `component:toggled` - Component selection changed, toggled model is passed as an argument to the callback
## Blocks
### Blocks
- `block:add` - New block added
- `block:remove` - Block removed
@ -32,7 +42,7 @@ var editor = grapesjs.init({...});
- `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
## Assets
### Assets
- `asset:add` - New asset added
- `asset:remove` - Asset removed
@ -41,19 +51,19 @@ var editor = grapesjs.init({...});
- `asset:upload:error` - On any error in upload, passes the error as an argument
- `asset:upload:response` - On upload response, passes the result as an argument
## Keymaps
### Keymaps
- `keymap:add` - New keymap added. The new keyamp object is passed as an argument
- `keymap:remove` - Keymap removed. The removed keyamp object is passed as an argument
- `keymap:emit` - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
- `keymap:emit:{keymapId}` - `keymapId` emitted, in arguments you get keymapId, shortcutUsed, Event
## Style Manager
### Style Manager
- `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
- `styleManager:change:{propertyName}` - As above but for a specific style property
## Storages
### Storages
- `storage:start` - Before the storage request is started
- `storage:start:store` - Before the store request. The object to store is passed as an argumnet (which you can edit)
@ -67,7 +77,7 @@ var editor = grapesjs.init({...});
- `storage:error:store` - Error on store request, passes the error as an argument
- `storage:error:load` - Error on load request, passes the error as an argument
## Canvas
### Canvas
- `canvas:dragenter` - When something is dragged inside the canvas, `DataTransfer` instance passed as an argument
- `canvas:dragover` - When something is dragging on canvas, `DataTransfer` instance passed as an argument
@ -76,16 +86,16 @@ var editor = grapesjs.init({...});
- `canvas:dragdata` - On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments.
By changing `result.content` you're able to customize what is dropped
## Selectors
### Selectors
- `selector:add` - Triggers when a new selector/class is created
## RTE
### RTE
- `rte:enable` - RTE enabled. The view, on which RTE is enabled, is passed as an argument
- `rte:disable` - RTE disabled. The view, on which RTE is disabled, is passed as an argument
## Commands
### Commands
- `run:{commandName}` - Triggered when some command is called to run (eg. editor.runCommand('preview'))
- `stop:{commandName}` - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
@ -93,48 +103,13 @@ var editor = grapesjs.init({...});
- `stop:{commandName}:before` - Triggered before the command is called to stop
- `abort:{commandName}` - Triggered when the command execution is aborted (`editor.on(`run:preview:before`, opts => opts.abort = 1);`)
## General
### General
- `canvasScroll` - Triggered when the canvas is scrolle
- `undo` - Undo executed
- `redo` - Redo executed
- `load` - When the editor is loaded
### Parameters
- `config`**[Object][1]** Configurations
- `config.container`**[string][2]** ='' Selector for the editor container, eg. '#myEditor'
- `config.components`**([string][2] \| [Array][3]<[Object][1]>)** HTML string or object of components (optional, default `''`)
- `config.style`**([string][2] \| [Array][3]<[Object][1]>)** CSS string or object of rules (optional, default `''`)
- `config.fromElement`**[Boolean][4]** If true, will fetch HTML and CSS from selected container (optional, default `false`)
Artur Arseniev
8 years ago