update docs structure

This commit is contained in:
Philipp Kühn
2020-09-25 18:02:22 +02:00
parent 0a4cd2618e
commit ccdad892d5
4 changed files with 90 additions and 76 deletions

View File

@@ -1,7 +1,7 @@
# 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 isnt in focus anymore. There are two ways to add code that is executed at those 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 isnt in focus anymore. There are two ways to add code that is executed at those events:
## Option 1: Use hooks ## Option 1: Hook into events
Hooks can be assigned to the editor on initialization. Pass a function that gets called in case of those events. Hooks can be assigned to the editor on initialization. Pass a function that gets called in case of those events.
```js ```js
@@ -9,9 +9,8 @@ const editor = new Editor({
onInit: () => { onInit: () => {
// the editor is ready // the editor is ready
}, },
onUpdate: ({ html }) => { onUpdate: () => {
// the content has been changed // the content has been changed
const newContent = html()
}, },
}) })
``` ```
@@ -28,20 +27,31 @@ editor.on('init', () => {
// the editor is ready // the editor is ready
}) })
editor.on('update', ({ html }) => { editor.on('update', () => {
// the content has been changed // the content has been changed
const newContent = html()
}) })
``` ```
### Unbind event listeners
```js
const callback = () => {
// the content has been changed
}
editor.on('update', callback)
editor.off('update', callback)
```
## List of events ## List of events
| Event | Description | Parameters | | Event | Description | Parameters |
| -------- | ----------------------------- | ------------------------------------ | | -------- | ----------------------------- | ------------------------------------ |
| `blur` | Editor isnt focused anymore. | `{ event, state, view }` | | `blur` | Editor isnt focused anymore. | `{ event }` |
| `focus` | Editor is in focus. | `{ event, state, view }` | | `focus` | Editor is in focus. | `{ event }` |
| `init` | Editor has been initialized. | `{ state, view }` | | `init` | Editor has been initialized. | *None* |
| `update` | Content has been changed. | `{ state, json, html, transaction }` | | `update` | Content has changed. | *None* |
| `transaction` | State has changed. | `{ transaction }` |
:::info List of hooks :::info List of hooks
The according hooks are called `onBlur`, `onFocus`, `onInit` and `onUpdate`. The according hooks are called `onBlur`, `onFocus`, `onInit`, `onUpdate` and `onTransaction`.
::: :::

View File

@@ -14,7 +14,7 @@ You can use `Mod` as a shorthand for `Cmd` on Mac and `Control` on other platfor
import BulletList from '@tiptap/extension-bullet-list' import BulletList from '@tiptap/extension-bullet-list'
// 2. Overwrite the keyboard shortcuts // 2. Overwrite the keyboard shortcuts
const CustomBulletList = new Node() const CustomBulletList = BulletList()
.keys(({ editor }) => ({ .keys(({ editor }) => ({
// ↓ your new keyboard shortcut // ↓ your new keyboard shortcut
'Mod-l': () => editor.bulletList(), 'Mod-l': () => editor.bulletList(),

View File

@@ -0,0 +1 @@
# Examples

View File

@@ -8,37 +8,8 @@
link: /overview/upgrade-guide link: /overview/upgrade-guide
- title: Contributing - title: Contributing
link: /overview/contributing link: /overview/contributing
- title: Guide
items:
- title: Getting started
link: /guide/getting-started
- title: Configuration
link: /guide/configuration
- title: Build your editor
link: /guide/build-your-editor
draft: true
- title: Custom styling
link: /guide/custom-styling
- title: Store content
link: /guide/store-content
- title: Custom extensions
link: /guide/custom-extensions
items:
- title: Change defaults
link: /guide/custom-extensions/change-defaults
draft: true
- title: Extend extensions
link: /guide/custom-extensions/extend-extensions
draft: true
- title: Start from scratch
link: /guide/custom-extensions/start-from-scratch
draft: true
- title: Use Vue Components
link: /guide/use-vue-components
draft: true
- title: Examples - title: Examples
link: /examples
items: items:
- title: Basic - title: Basic
link: /examples/basic link: /examples/basic
@@ -103,6 +74,38 @@
- title: Export HTML or JSON - title: Export HTML or JSON
link: /examples/export-html-or-json link: /examples/export-html-or-json
- title: Guide
items:
- title: Getting started
link: /guide/getting-started
- title: Configuration
link: /guide/configuration
- title: Build your editor
link: /guide/build-your-editor
draft: true
- title: Custom styling
link: /guide/custom-styling
- title: Store content
link: /guide/store-content
- title: Custom extensions
link: /guide/custom-extensions
items:
- title: Change defaults
link: /guide/custom-extensions/change-defaults
draft: true
- title: Extend extensions
link: /guide/custom-extensions/extend-extensions
draft: true
- title: Start from scratch
link: /guide/custom-extensions/start-from-scratch
draft: true
- title: Use Vue Components
link: /guide/use-vue-components
draft: true
# - title: Collaborative editing
# link: /guide/use-vue-components
# draft: true
- title: API - title: API
items: items:
- title: Overview - title: Overview