docs: update event page
This commit is contained in:
@@ -3,9 +3,25 @@
|
|||||||
## toc
|
## toc
|
||||||
|
|
||||||
## Introduction
|
## Introduction
|
||||||
The editor fires a few different events that you can hook into. There are three ways to register event listeners:
|
The editor fires a few different events that you can hook into. Let’s have a look at all the available events first:
|
||||||
|
|
||||||
## Option 1: Configuration
|
## List of available events
|
||||||
|
|
||||||
|
| Event | Description |
|
||||||
|
| --------------- | --------------------------------- |
|
||||||
|
| beforeCreate | Before the view is created. |
|
||||||
|
| create | The editor is ready. |
|
||||||
|
| update | The content has changed. |
|
||||||
|
| selectionUpdate | The selection has changed. |
|
||||||
|
| transaction | The editor state has changed. |
|
||||||
|
| focus | The editor is focused. |
|
||||||
|
| blur | The editor isn’t focused anymore. |
|
||||||
|
| destroy | The editor is being destroyed. |
|
||||||
|
|
||||||
|
## Register event listeners
|
||||||
|
There are three ways to register event listeners.
|
||||||
|
|
||||||
|
### Option 1: Configuration
|
||||||
You can define your event listeners on a new editor instance right-away:
|
You can define your event listeners on a new editor instance right-away:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@@ -37,10 +53,10 @@ const editor = new Editor({
|
|||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
## Option 2: Binding
|
### Option 2: Binding
|
||||||
Or you can register your event listeners on a running editor instance:
|
Or you can register your event listeners on a running editor instance:
|
||||||
|
|
||||||
### Bind event listeners
|
#### Bind event listeners
|
||||||
```js
|
```js
|
||||||
editor.on('beforeCreate', ({ editor }) => {
|
editor.on('beforeCreate', ({ editor }) => {
|
||||||
// Before the view is created.
|
// Before the view is created.
|
||||||
@@ -75,7 +91,7 @@ editor.on('destroy', () => {
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Unbind event listeners
|
#### Unbind event listeners
|
||||||
If you need to unbind those event listeners at some point, you should register your event listeners with `.on()` and unbind them with `.off()` then.
|
If you need to unbind those event listeners at some point, you should register your event listeners with `.on()` and unbind them with `.off()` then.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@@ -90,7 +106,7 @@ editor.on('update', onUpdate)
|
|||||||
editor.off('update', onUpdate)
|
editor.off('update', onUpdate)
|
||||||
```
|
```
|
||||||
|
|
||||||
## Option 3: Extensions
|
### Option 3: Extensions
|
||||||
Moving your event listeners to custom extensions (or nodes, or marks) is also possible. Here’s how that would look like:
|
Moving your event listeners to custom extensions (or nodes, or marks) is also possible. Here’s how that would look like:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|||||||
Reference in New Issue
Block a user