update docs structure
This commit is contained in:
@@ -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 isn’t 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 isn’t 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 isn’t focused anymore. | `{ event, state, view }` |
|
| `blur` | Editor isn’t 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`.
|
||||||
:::
|
:::
|
||||||
@@ -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(),
|
||||||
|
|||||||
1
docs/src/docPages/examples.md
Normal file
1
docs/src/docPages/examples.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# Examples
|
||||||
@@ -8,6 +8,71 @@
|
|||||||
link: /overview/upgrade-guide
|
link: /overview/upgrade-guide
|
||||||
- title: Contributing
|
- title: Contributing
|
||||||
link: /overview/contributing
|
link: /overview/contributing
|
||||||
|
- title: Examples
|
||||||
|
link: /examples
|
||||||
|
items:
|
||||||
|
- title: Basic
|
||||||
|
link: /examples/basic
|
||||||
|
# - title: Menu Bubble
|
||||||
|
# link: /examples/menu-bubble
|
||||||
|
# draft: true
|
||||||
|
# - title: Floating Menu
|
||||||
|
# link: /examples/floating-menu
|
||||||
|
# draft: true
|
||||||
|
# - title: Links
|
||||||
|
# link: /examples/links
|
||||||
|
# draft: true
|
||||||
|
# - title: Images
|
||||||
|
# link: /examples/images
|
||||||
|
# draft: true
|
||||||
|
# - title: Hiding Menu Bar
|
||||||
|
# link: /examples/hiding-menu-bar
|
||||||
|
# draft: true
|
||||||
|
# - title: Todo List
|
||||||
|
# link: /examples/todo-list
|
||||||
|
# draft: true
|
||||||
|
# - title: Tables
|
||||||
|
# link: /examples/tables
|
||||||
|
# draft: true
|
||||||
|
# - title: Search and Replace
|
||||||
|
# link: /examples/search-and-replace
|
||||||
|
# draft: true
|
||||||
|
# - title: Suggestions
|
||||||
|
# link: /examples/suggestions
|
||||||
|
# draft: true
|
||||||
|
- title: Markdown Shortcuts
|
||||||
|
link: /examples/markdown-shortcuts
|
||||||
|
# - title: Code Highlighting
|
||||||
|
# link: /examples/code-highlighting
|
||||||
|
# draft: true
|
||||||
|
- title: History
|
||||||
|
link: /examples/history
|
||||||
|
- title: Read-Only
|
||||||
|
link: /examples/read-only
|
||||||
|
# - title: Embeds
|
||||||
|
# link: /examples/embeds
|
||||||
|
# draft: true
|
||||||
|
# - title: Placeholder
|
||||||
|
# link: /examples/placeholder
|
||||||
|
# draft: true
|
||||||
|
# - title: Focus
|
||||||
|
# link: /examples/focus
|
||||||
|
# - title: Collaboration
|
||||||
|
# link: /examples/collaboration
|
||||||
|
# draft: true
|
||||||
|
# - title: Title
|
||||||
|
# link: /examples/title
|
||||||
|
# draft: true
|
||||||
|
# - title: Trailing Paragraph
|
||||||
|
# link: /examples/trailing-paragraph
|
||||||
|
# draft: true
|
||||||
|
# - title: Drag Handle
|
||||||
|
# link: /examples/drag-handle
|
||||||
|
# draft: true
|
||||||
|
- title: Minimalist
|
||||||
|
link: /examples/minimalist
|
||||||
|
- title: Export HTML or JSON
|
||||||
|
link: /examples/export-html-or-json
|
||||||
|
|
||||||
- title: Guide
|
- title: Guide
|
||||||
items:
|
items:
|
||||||
@@ -37,71 +102,9 @@
|
|||||||
- title: Use Vue Components
|
- title: Use Vue Components
|
||||||
link: /guide/use-vue-components
|
link: /guide/use-vue-components
|
||||||
draft: true
|
draft: true
|
||||||
|
# - title: Collaborative editing
|
||||||
- title: Examples
|
# link: /guide/use-vue-components
|
||||||
items:
|
|
||||||
- title: Basic
|
|
||||||
link: /examples/basic
|
|
||||||
# - title: Menu Bubble
|
|
||||||
# link: /examples/menu-bubble
|
|
||||||
# draft: true
|
# draft: true
|
||||||
# - title: Floating Menu
|
|
||||||
# link: /examples/floating-menu
|
|
||||||
# draft: true
|
|
||||||
# - title: Links
|
|
||||||
# link: /examples/links
|
|
||||||
# draft: true
|
|
||||||
# - title: Images
|
|
||||||
# link: /examples/images
|
|
||||||
# draft: true
|
|
||||||
# - title: Hiding Menu Bar
|
|
||||||
# link: /examples/hiding-menu-bar
|
|
||||||
# draft: true
|
|
||||||
# - title: Todo List
|
|
||||||
# link: /examples/todo-list
|
|
||||||
# draft: true
|
|
||||||
# - title: Tables
|
|
||||||
# link: /examples/tables
|
|
||||||
# draft: true
|
|
||||||
# - title: Search and Replace
|
|
||||||
# link: /examples/search-and-replace
|
|
||||||
# draft: true
|
|
||||||
# - title: Suggestions
|
|
||||||
# link: /examples/suggestions
|
|
||||||
# draft: true
|
|
||||||
- title: Markdown Shortcuts
|
|
||||||
link: /examples/markdown-shortcuts
|
|
||||||
# - title: Code Highlighting
|
|
||||||
# link: /examples/code-highlighting
|
|
||||||
# draft: true
|
|
||||||
- title: History
|
|
||||||
link: /examples/history
|
|
||||||
- title: Read-Only
|
|
||||||
link: /examples/read-only
|
|
||||||
# - title: Embeds
|
|
||||||
# link: /examples/embeds
|
|
||||||
# draft: true
|
|
||||||
# - title: Placeholder
|
|
||||||
# link: /examples/placeholder
|
|
||||||
# draft: true
|
|
||||||
# - title: Focus
|
|
||||||
# link: /examples/focus
|
|
||||||
# - title: Collaboration
|
|
||||||
# link: /examples/collaboration
|
|
||||||
# draft: true
|
|
||||||
# - title: Title
|
|
||||||
# link: /examples/title
|
|
||||||
# draft: true
|
|
||||||
# - title: Trailing Paragraph
|
|
||||||
# link: /examples/trailing-paragraph
|
|
||||||
# draft: true
|
|
||||||
# - title: Drag Handle
|
|
||||||
# link: /examples/drag-handle
|
|
||||||
# draft: true
|
|
||||||
- title: Minimalist
|
|
||||||
link: /examples/minimalist
|
|
||||||
- title: Export HTML or JSON
|
|
||||||
link: /examples/export-html-or-json
|
|
||||||
|
|
||||||
- title: API
|
- title: API
|
||||||
items:
|
items:
|
||||||
|
|||||||
Reference in New Issue
Block a user