add node example to readme

This commit is contained in:
Philipp Kühn 2018-08-24 16:52:42 +02:00 committed by GitHub
parent dcc1be41ca
commit 9cb07c0b1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -141,6 +141,67 @@ The most powerful feature of tiptap is that you can create you own extensions. T
| `inputRules({ type, schema })` | `Array` | `[]` | Define a list of input rules. | | `inputRules({ type, schema })` | `Array` | `[]` | Define a list of input rules. |
| `get plugins()` | `Array` | `[]` | Define a list of [Prosemirror plugins](https://prosemirror.net/docs/guide/). | | `get plugins()` | `Array` | `[]` | Define a list of [Prosemirror plugins](https://prosemirror.net/docs/guide/). |
#### Create a Node
Let's take a look at a real example. This is basically how the default `blockquote` node from [`tiptap-extensions`](https://www.npmjs.com/package/tiptap-extensions) looks like.
```js
import { Node } from 'tiptap'
import { wrappingInputRule, setBlockType, wrapIn } from 'tiptap-commands'
export default class BlockquoteNode extends Node {
// choose a unique name
get name() {
return 'blockquote'
}
// the prosemirror schema object
get schema() {
return {
content: 'block+',
group: 'block',
defining: true,
draggable: false,
// this rule is for parsing pasted HTML
// so every blockquote tag will be converted to this blockquote node
parseDOM: [
{ tag: 'blockquote' },
],
// this is how this node will be rendered
// in this case a blockquote tag with a class called 'awesome-blockquote' will be rendered
// the '0' stands for its content inside
toDOM: () => ['blockquote', { class: 'awesome-blockquote' }, 0],
}
}
// this command will be called from menus to add a blockquote
// 'type' is the prosemirror schema object for this blockquote
// 'schema' is a collection of all registered nodes and marks
command({ type, schema }) {
return wrapIn(type)
}
// here you can register some shortcuts
// in this case you can create a blockquote with 'ctrl' + '>'
keys({ type }) {
return {
'Ctrl->': wrapIn(type),
}
}
// a blockquote will be created when you are on a new line and type '>' followed by a space
inputRules({ type }) {
return [
wrappingInputRule(/^\s*>\s$/, type),
]
}
}
```
#### Create a Node as a Vue Component
For a live example you can take a look at the [embed example](https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Embeds). For a live example you can take a look at the [embed example](https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/Embeds).
## Contributing ## Contributing