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. |
|
| `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
|
||||||
|
Loading…
Reference in New Issue
Block a user