This commit is contained in:
Hans Pagel
2020-09-21 17:50:50 +02:00
parent b2c85f11df
commit 0c6e49362f
5 changed files with 37 additions and 31 deletions

View File

@@ -1,25 +1,28 @@
# Editor
:::warning Out of date
This content is written for tiptap 1 and needs an update.
:::
This class is a central building block of tiptap. It does most of the heavy lifting of creating a working [ProseMirror](https://ProseMirror.net/) editor such as creating the [`EditorView`](https://ProseMirror.net/docs/ref/#view.EditorView), setting the initial [`EditorState`](https://ProseMirror.net/docs/ref/#state.Editor_State) and so on.
## Editor Properties
| Property | Type | Default | Description |
| ---------------------- | :--------------: | :---------: | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| `content` | `Object\|String` | `null` | The editor state object used by Prosemirror. You can also pass HTML to the `content` slot. When used both, the `content` slot will be ignored. |
| `editorProps` | `Object` | `{}` | A list of [Prosemirror editorProps](https://prosemirror.net/docs/ref/#view.EditorProps). |
| `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |
| `autoFocus` | `Boolean` | `false` | Focus the editor on init. |
| `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`. |
| `useBuiltInExtensions` | `Boolean` | `true` | By default tiptap adds a `Doc`, `Paragraph` and `Text` node to the Prosemirror schema. |
| `dropCursor` | `Object` | `{}` | Config for `prosemirror-dropcursor`. |
| `enableDropCursor` | `Boolean` | `true` | Option to enable / disable the dropCursor plugin. |
| `enableGapCursor` | `Boolean` | `true` | Option to enable / disable the gapCursor plugin. |
| `parseOptions` | `Object` | `{}` | A list of [Prosemirror parseOptions](https://prosemirror.net/docs/ref/#model.ParseOptions). |
| `onInit` | `Function` | `undefined` | This will return an Object with the current `state` and `view` of Prosemirror on init. |
| `onFocus` | `Function` | `undefined` | This will return an Object with the `event` and current `state` and `view` of Prosemirror on focus. |
| `onBlur` | `Function` | `undefined` | This will return an Object with the `event` and current `state` and `view` of Prosemirror on blur. |
| `onUpdate` | `Function` | `undefined` | This will return an Object with the current `state` of Prosemirror, a `getJSON()` and `getHTML()` function and the `transaction` on every change. |
## Settings
All of the listed settings can be set during initialization, read and updated during runtime.
| Setting | Type | Default | Description |
| ------------------ | --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `autoFocus` | `Boolean` | `false` | Focus the editor on init. |
| `content` | `Object|String` | `null` | The editor state object used by Prosemirror. You can also pass HTML to the `content` slot. When used both, the `content` slot will be ignored. |
| `dropCursor` | `Object` | `{}` | Config for `prosemirror-dropcursor`. |
| `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |
| `editorProps` | `Object` | `{}` | A list of [Prosemirror editorProps](https://prosemirror.net/docs/ref/#view.EditorProps). |
| `enableDropCursor` | `Boolean` | `true` | Option to enable / disable the dropCursor 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`. |
| `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 gets 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. |

View File

@@ -11,9 +11,9 @@ const editor = new Editor({
onInit: () => {
// editor is initialized
},
onUpdate: ({ getHTML }) => {
onUpdate: ({ html }) => {
// get new content on update
const newContent = getHTML()
const newContent = html()
},
})
```
@@ -27,8 +27,8 @@ editor.on('init', () => {
// editor is initialized
})
editor.on('update', ({ getHTML }) => {
editor.on('update', ({ html }) => {
// get new content on update
const newContent = getHTML()
const newContent = html()
})
```