add GuideNodeViews demos

This commit is contained in:
Philipp Kühn
2021-08-25 18:32:54 +02:00
parent b1a87e4ad6
commit 8a5a491d8e
32 changed files with 1264 additions and 0 deletions

View File

@@ -0,0 +1,54 @@
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
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 youre used to, but enriched with node views.
</p>
<vue-component>
<p>This is editable.</p>
</vue-component>
<p>
Did you see that? Thats a Vue component. We are really living in the future.
</p>
`,
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
/* Basic editor styles */
.ProseMirror {
> * + * {
margin-top: 0.75em;
}
}
</style>