Document 是 tiptap 编辑器的根节点,任何节点都在该节点下面,就像 html 的 body 标签。
npm install @tiptap/extension-document
Vue 例子
React 例子
<template>
<div v-if="editor">
<editor-content :editor="editor" />
</div>
</template>
<script>
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { Editor, EditorContent } from '@tiptap/vue-3'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
Document,
Paragraph,
Text,
],
content: `
<p>The Document extension is required. Though, you can write your own implementation, e. g. to give it custom name.</p>
`,
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import { EditorContent, useEditor } from '@tiptap/react'
import React from 'react'
export default () => {
const editor = useEditor({
extensions: [Document, Paragraph, Text],
content: `
<p>The Document extension is required. Though, you can write your own implementation, e. g. to give it custom name.</p>
`,
})
if (!editor) {
return null
}
return <EditorContent editor={editor} />
}
本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。