2020-09-09 21:59:34 +08:00
|
|
|
|
# Events
|
|
|
|
|
|
2020-09-27 16:29:01 +08:00
|
|
|
|
## Table of Contents
|
|
|
|
|
|
2020-10-01 18:26:20 +08:00
|
|
|
|
## Introduction
|
|
|
|
|
The editor fires a few different events that you can hook into. There are two ways to register event listeners:
|
|
|
|
|
|
2020-09-26 04:22:44 +08:00
|
|
|
|
## Option 1: Right-away
|
|
|
|
|
You can define your event listeners on a new editor instance right-away:
|
2020-09-09 21:59:34 +08:00
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
const editor = new Editor({
|
|
|
|
|
onInit: () => {
|
2020-09-26 04:22:44 +08:00
|
|
|
|
// The editor is ready.
|
2020-09-09 21:59:34 +08:00
|
|
|
|
},
|
2020-09-26 00:02:22 +08:00
|
|
|
|
onUpdate: () => {
|
2020-09-26 04:22:44 +08:00
|
|
|
|
// The content has changed.
|
|
|
|
|
},
|
|
|
|
|
onFocus: () => {
|
|
|
|
|
// The editor is focused.
|
|
|
|
|
},
|
|
|
|
|
onBlur: () => {
|
|
|
|
|
// The editor isn’t focused anymore.
|
|
|
|
|
},
|
|
|
|
|
onTransaction: ({ transaction }) => {
|
|
|
|
|
// The editor state has changed.
|
2020-09-09 21:59:34 +08:00
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
```
|
|
|
|
|
|
2020-09-26 04:22:44 +08:00
|
|
|
|
## Option 2: Later
|
|
|
|
|
Or you can register your event listeners on a running editor instance:
|
2020-09-09 21:59:34 +08:00
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
editor.on('init', () => {
|
2020-09-26 04:22:44 +08:00
|
|
|
|
// The editor is ready.
|
|
|
|
|
}
|
2020-09-09 21:59:34 +08:00
|
|
|
|
|
2020-09-26 00:02:22 +08:00
|
|
|
|
editor.on('update', () => {
|
2020-09-26 04:22:44 +08:00
|
|
|
|
// The content has changed.
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
editor.on('focus', () => {
|
|
|
|
|
// The editor is focused.
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
editor.on('blur', () => {
|
|
|
|
|
// The editor isn’t focused anymore.
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
editor.on('transaction', ({ transaction }) => {
|
|
|
|
|
// The editor state has changed.
|
|
|
|
|
}
|
2020-09-09 21:59:34 +08:00
|
|
|
|
```
|
2020-09-23 16:17:54 +08:00
|
|
|
|
|
2020-09-26 00:02:22 +08:00
|
|
|
|
### Unbind event listeners
|
|
|
|
|
|
2020-09-26 04:22:44 +08:00
|
|
|
|
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.
|
|
|
|
|
|
2020-09-26 00:02:22 +08:00
|
|
|
|
```js
|
2020-09-26 04:22:44 +08:00
|
|
|
|
const onUpdate = () => {
|
|
|
|
|
// The content has changed.
|
2020-09-26 00:02:22 +08:00
|
|
|
|
}
|
|
|
|
|
|
2020-09-26 04:22:44 +08:00
|
|
|
|
// Bind …
|
|
|
|
|
editor.on('update', onUpdate)
|
2020-09-26 00:02:22 +08:00
|
|
|
|
|
2020-09-26 04:22:44 +08:00
|
|
|
|
// … and unbind.
|
|
|
|
|
editor.off('update', onUpdate)
|
|
|
|
|
```
|