docs: update event page

This commit is contained in:
Hans Pagel
2021-06-22 21:33:05 +02:00
parent 50a793cd43
commit b226f77754

View File

@@ -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. Lets 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 isnt 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. Heres how that would look like: Moving your event listeners to custom extensions (or nodes, or marks) is also possible. Heres how that would look like:
```js ```js