mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-18 13:17:49 +08:00
add node example to readme
This commit is contained in:
parent
dcc1be41ca
commit
9cb07c0b1d
61
README.md
61
README.md
@ -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. |
|
||||
| `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).
|
||||
|
||||
## Contributing
|
||||
|
Loading…
Reference in New Issue
Block a user