2021-03-18 05:35:41 +08:00
|
|
|
|
# Node views with JavaScript
|
|
|
|
|
|
|
|
|
|
## toc
|
|
|
|
|
|
|
|
|
|
## Introduction
|
|
|
|
|
TODO
|
|
|
|
|
|
2021-03-18 06:21:36 +08:00
|
|
|
|
## Code snippet
|
2021-03-18 05:35:41 +08:00
|
|
|
|
```js
|
|
|
|
|
import { Node } from '@tiptap/core'
|
|
|
|
|
import { VueNodeViewRenderer } from '@tiptap/vue-2'
|
|
|
|
|
import Component from './Component.vue'
|
|
|
|
|
|
|
|
|
|
export default Node.create({
|
|
|
|
|
addNodeView() {
|
|
|
|
|
return ({ editor, node, getPos, HTMLAttributes, decorations, extension }) => {
|
|
|
|
|
const dom = document.createElement('div')
|
|
|
|
|
|
|
|
|
|
dom.innerHTML = 'Hello, I’m a node view!'
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
dom,
|
|
|
|
|
}
|
2021-03-18 06:21:36 +08:00
|
|
|
|
}
|
2021-03-18 05:35:41 +08:00
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
```
|
2021-03-18 06:21:36 +08:00
|
|
|
|
|
|
|
|
|
## Render markup
|
|
|
|
|
<demo name="Guide/NodeViews/JavaScript" />
|
|
|
|
|
|
|
|
|
|
## Access node attributes
|
|
|
|
|
TODO
|
|
|
|
|
|
|
|
|
|
## Update node attributes
|
|
|
|
|
TODO
|
|
|
|
|
|
|
|
|
|
## Adding a content editable
|
|
|
|
|
TODO
|
|
|
|
|
|
|
|
|
|
## All available props
|
|
|
|
|
TODO
|