add FullEditor component
This commit is contained in:
24
docs/src/demos/Examples/FullEditor/index.vue
Normal file
24
docs/src/demos/Examples/FullEditor/index.vue
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<full-editor v-model="content" />
|
||||||
|
<div>
|
||||||
|
{{ content }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { FullEditor } from '@tiptap/vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
FullEditor,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
content: '<p>full editor</p>',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
3
docs/src/docPages/examples/full-editor.md
Normal file
3
docs/src/docPages/examples/full-editor.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# Full Editor
|
||||||
|
|
||||||
|
<demo name="Examples/FullEditor" />
|
||||||
@@ -15,6 +15,7 @@
|
|||||||
"vue": "2.x"
|
"vue": "2.x"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"prosemirror-view": "^1.16.1"
|
"prosemirror-view": "^1.16.1",
|
||||||
|
"@tiptap/starter-kit": "1.x"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
45
packages/vue/src/components/FullEditor.vue
Normal file
45
packages/vue/src/components/FullEditor.vue
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<editor-content :editor="editor" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { Editor } from '@tiptap/core'
|
||||||
|
import { defaultExtensions } from '@tiptap/starter-kit'
|
||||||
|
import EditorContent from './EditorContent.ts'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
EditorContent,
|
||||||
|
},
|
||||||
|
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: [String, Object],
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editor: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.editor = new Editor({
|
||||||
|
extensions: defaultExtensions(),
|
||||||
|
content: this.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
this.editor.on('update', () => {
|
||||||
|
this.$emit('input', this.editor.getHTML())
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeDestroy() {
|
||||||
|
this.editor.destroy()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,3 +1,4 @@
|
|||||||
export * from '@tiptap/core'
|
export * from '@tiptap/core'
|
||||||
export { default as VueRenderer } from './VueRenderer'
|
export { default as VueRenderer } from './VueRenderer'
|
||||||
export { default as EditorContent } from './components/EditorContent'
|
export { default as EditorContent } from './components/EditorContent'
|
||||||
|
export { default as FullEditor } from './components/FullEditor.vue'
|
||||||
|
|||||||
Reference in New Issue
Block a user