add content to the events page
This commit is contained in:
@@ -16,13 +16,3 @@ All of the listed settings can be set during initialization, read and updated du
|
|||||||
| `enableGapCursor` | `Boolean` | `true` | Option to enable / disable the gapCursor plugin. |
|
| `enableGapCursor` | `Boolean` | `true` | Option to enable / disable the gapCursor plugin. |
|
||||||
| `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
|
| `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
|
||||||
| `parseOptions` | `Object` | `{}` | A list of [Prosemirror parseOptions](https://prosemirror.net/docs/ref/#model.ParseOptions). |
|
| `parseOptions` | `Object` | `{}` | A list of [Prosemirror parseOptions](https://prosemirror.net/docs/ref/#model.ParseOptions). |
|
||||||
|
|
||||||
## Hooks
|
|
||||||
The editor provides a few hooks to react to specific [events](/api/events). Pass a function that get’s called in case of those events.
|
|
||||||
|
|
||||||
| Hook | Type | Default | Description |
|
|
||||||
| ---------- | ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
||||||
| `onBlur` | `Function` | `undefined` | This will return an Object with the `event` and current `state` and `view` of Prosemirror on blur. |
|
|
||||||
| `onFocus` | `Function` | `undefined` | This will return an Object with the `event` and current `state` and `view` of Prosemirror on focus. |
|
|
||||||
| `onInit` | `Function` | `undefined` | This will return an Object with the current `state` and `view` of Prosemirror on init. |
|
|
||||||
| `onUpdate` | `Function` | `undefined` | This will return an Object with the current `state` of Prosemirror, a `json()` and `html()` function and the `transaction` on every change. |
|
|
||||||
|
|||||||
@@ -1,34 +1,43 @@
|
|||||||
# Events
|
# Events
|
||||||
|
Events are a great way to run code when the editor has been initialized, the content has changed, the editor is in focus or the editor isn’t in focus anymore. There are two ways to add code to those events.
|
||||||
|
|
||||||
:::warning Out of date
|
## Option 1: Use hooks
|
||||||
This content is written for tiptap 1 and needs an update.
|
Hooks can be assigned to the editor on initialization. Pass a function that gets called in case of those events.
|
||||||
:::
|
|
||||||
|
|
||||||
There are some events you can listen for. A full list of events can be found here.
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const editor = new Editor({
|
const editor = new Editor({
|
||||||
onInit: () => {
|
onInit: () => {
|
||||||
// editor is initialized
|
// the editor is ready
|
||||||
},
|
},
|
||||||
onUpdate: ({ html }) => {
|
onUpdate: ({ html }) => {
|
||||||
// get new content on update
|
// the content has been changed
|
||||||
const newContent = html()
|
const newContent = html()
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
It's also possible to register event listeners afterwards.
|
## Option 2: Listen for events
|
||||||
|
You can even register event listeners later. Here is the same example with event listeners:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const editor = new Editor(…)
|
const editor = new Editor({
|
||||||
|
// …
|
||||||
|
})
|
||||||
|
|
||||||
editor.on('init', () => {
|
editor.on('init', () => {
|
||||||
// editor is initialized
|
// the editor is ready
|
||||||
})
|
})
|
||||||
|
|
||||||
editor.on('update', ({ html }) => {
|
editor.on('update', ({ html }) => {
|
||||||
// get new content on update
|
// the content has been changed
|
||||||
const newContent = html()
|
const newContent = html()
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## List of available hooks & events
|
||||||
|
| Hook | Event | Description |
|
||||||
|
| ---------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
|
| `onBlur` | `blur` | Returns an object with the `event` and current `state` and `view` of Prosemirror on blur. |
|
||||||
|
| `onFocus` | `focus` | Returns an object with the `event` and current `state` and `view` of Prosemirror on focus. |
|
||||||
|
| `onInit` | `init` | Returns an object with the current `state` and `view` of Prosemirror on init. |
|
||||||
|
| `onUpdate` | `update` | Returns an object with the current `state` of Prosemirror, a `json()` and `html()` function and the `transaction` on every change. |
|
||||||
@@ -173,7 +173,6 @@
|
|||||||
draft: true
|
draft: true
|
||||||
- title: Events
|
- title: Events
|
||||||
link: /api/events
|
link: /api/events
|
||||||
draft: true
|
|
||||||
- title: Schema
|
- title: Schema
|
||||||
link: /api/schema
|
link: /api/schema
|
||||||
items:
|
items:
|
||||||
|
|||||||
Reference in New Issue
Block a user