8c6751f0c6
* chore: add precommit hook for eslint fixes, fix linting issues * chore: add eslint import sort plugin
56 lines
971 B
Vue
56 lines
971 B
Vue
<template>
|
||
<editor-content :editor="editor" />
|
||
</template>
|
||
|
||
<script>
|
||
import StarterKit from '@tiptap/starter-kit'
|
||
import { Editor, EditorContent } from '@tiptap/vue-3'
|
||
|
||
import VueComponent from './Extension.js'
|
||
|
||
export default {
|
||
components: {
|
||
EditorContent,
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
editor: null,
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
this.editor = new Editor({
|
||
extensions: [
|
||
StarterKit,
|
||
VueComponent,
|
||
],
|
||
content: `
|
||
<p>
|
||
This is still the text editor you’re used to, but enriched with node views.
|
||
</p>
|
||
<vue-component>
|
||
<p>This is editable.</p>
|
||
</vue-component>
|
||
<p>
|
||
Did you see that? That’s a Vue component. We are really living in the future.
|
||
</p>
|
||
`,
|
||
})
|
||
},
|
||
|
||
beforeUnmount() {
|
||
this.editor.destroy()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
/* Basic editor styles */
|
||
.ProseMirror {
|
||
> * + * {
|
||
margin-top: 0.75em;
|
||
}
|
||
}
|
||
</style>
|