add toc demo

This commit is contained in:
Philipp Kühn
2020-11-30 22:53:31 +01:00
parent 85a983cd11
commit b7ae78a95f
4 changed files with 183 additions and 0 deletions

View File

@@ -0,0 +1,48 @@
<template>
<div v-if="editor">
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
import TableOfContents from './TableOfContents.js'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
...defaultExtensions(),
TableOfContents,
],
content: `
<toc></toc>
<h2>heading</h2>
<p>paragraph</p>
<h3>heading</h3>
<p>paragraph</p>
<h3>heading</h3>
<p>paragraph</p>
<h2>heading</h2>
<p>paragraph</p>
<h3>heading</h3>
<p>paragraph</p>
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>