add basic node view examples to docs
This commit is contained in:
@@ -6,6 +6,26 @@
|
|||||||
|
|
||||||
TODO
|
TODO
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Node } from '@tiptap/core'
|
||||||
|
import { VueRenderer } from '@tiptap/vue'
|
||||||
|
import Component from './Component.vue'
|
||||||
|
|
||||||
|
export default Node.create({
|
||||||
|
addNodeView() {
|
||||||
|
return ({ editor, node, getPos, HTMLAttributes, decorations, extension }) => {
|
||||||
|
const dom = document.createElement('div')
|
||||||
|
|
||||||
|
dom.innerHTML = 'I’m a node view'
|
||||||
|
|
||||||
|
return {
|
||||||
|
dom,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
## Different types of node views
|
## Different types of node views
|
||||||
|
|
||||||
### Simple
|
### Simple
|
||||||
@@ -53,3 +73,60 @@ TODO
|
|||||||
|
|
||||||
## Render Vue components
|
## Render Vue components
|
||||||
|
|
||||||
|
### Node
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Node } from '@tiptap/core'
|
||||||
|
import { VueRenderer } from '@tiptap/vue'
|
||||||
|
import Component from './Component.vue'
|
||||||
|
|
||||||
|
export default Node.create({
|
||||||
|
addNodeView() {
|
||||||
|
return VueRenderer(Component)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
### Component
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<node-view-wrapper>
|
||||||
|
<node-view-content />
|
||||||
|
</node-view-wrapper>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
editor: {
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
node: {
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
decorations: {
|
||||||
|
type: Array,
|
||||||
|
},
|
||||||
|
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
},
|
||||||
|
|
||||||
|
extension: {
|
||||||
|
type: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
getPos: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
|
||||||
|
updateAttributes: {
|
||||||
|
type: Function,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user