tiptap/docs/src/docPages/api/events.md

71 lines
1.3 KiB
Markdown
Raw Normal View History

# Events
2020-09-27 16:29:01 +08:00
## Table of Contents
## 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:
```js
const editor = new Editor({
onInit: () => {
2020-09-26 04:22:44 +08:00
// The editor is ready.
},
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 isnt focused anymore.
},
onTransaction: ({ transaction }) => {
// The editor state has changed.
},
})
```
2020-09-26 04:22:44 +08:00
## Option 2: Later
Or you can register your event listeners on a running editor instance:
```js
editor.on('init', () => {
2020-09-26 04:22:44 +08:00
// The editor is ready.
}
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 isnt focused anymore.
}
editor.on('transaction', ({ transaction }) => {
// The editor state has changed.
}
```
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)
```