mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-06-07 01:12:56 +08:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

docs: update content, fix #1821

Browse Source
This commit is contained in:
Philipp Kühn 2021-12-10 14:36:43 +01:00
parent 1fd42ca291
commit 49a99a0410
3 changed files with 132 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
docs/installation/nuxt.md
View File

@ -96,3 +96,69 @@ You should now see Tiptap in your browser. Time to give yourself a pat on the ba
You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is a working example component, that you can integrate in your project:
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
```html
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
EditorContent,
},
props: {
value: {
type: String,
default: '',
},
},
data() {
return {
editor: null,
}
},
watch: {
value(value) {
// HTML
const isSame = this.editor.getHTML() === value
// JSON
// const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)
if (isSame) {
return
}
this.editor.commands.setContent(value, false)
},
},
mounted() {
this.editor = new Editor({
content: this.value,
extensions: [
StarterKit,
],
onUpdate: () => {
// HTML
this.$emit('input', this.editor.getHTML())
// JSON
// this.$emit('input', this.editor.getJSON())
},
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
```

66
docs/installation/vue2.md
View File

@ -103,4 +103,68 @@ You should now see Tiptap in your browser. Time to give yourself a pat on the ba
## 5. Use v-model (optional)
You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is a working example component, that you can integrate in your project:
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel
```html
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-2'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
EditorContent,
},
props: {
value: {
type: String,
default: '',
},
},
data() {
return {
editor: null,
}
},
watch: {
value(value) {
// HTML
const isSame = this.editor.getHTML() === value
// JSON
// const isSame = JSON.stringify(this.editor.getJSON()) === JSON.stringify(value)
if (isSame) {
return
}
this.editor.commands.setContent(value, false)
},
},
mounted() {
this.editor = new Editor({
content: this.value,
extensions: [
StarterKit,
],
onUpdate: () => {
// HTML
this.$emit('input', this.editor.getHTML())
// JSON
// this.$emit('input', this.editor.getJSON())
},
})
},
beforeDestroy() {
this.editor.destroy()
},
}
</script>
```

58
docs/installation/vue3.md
View File

@ -133,60 +133,4 @@ You should now see Tiptap in your browser. Time to give yourself a pat on the ba
## 5. Use v-model (optional)
You’re probably used to bind your data with `v-model` in forms, that’s also possible with Tiptap. Here is how that would work with Tiptap:
```html
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
export default {
components: {
EditorContent,
},
props: {
modelValue: {
type: String,
default: '',
},
},
data() {
return {
editor: null,
}
},
watch: {
modelValue(value) {
const isSame = this.editor.getHTML() === value
if (isSame) {
return
}
this.editor.commands.setContent(value, false)
},
},
mounted() {
this.editor = new Editor({
content: this.modelValue,
extensions: [
StarterKit,
],
onUpdate: () => {
this.$emit('update:modelValue', this.editor.getHTML())
},
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>
```
https://embed.tiptap.dev/preview/GuideGettingStarted/VModel