docs: update content

This commit is contained in:
Hans Pagel 2021-03-03 22:22:50 +01:00
parent c10093fbcf
commit a997b647f4
2 changed files with 90 additions and 4 deletions

View File

@ -99,7 +99,61 @@ export default {
You should now see tiptap in your browser. Youve successfully set up tiptap! Time to give yourself a pat on the back. Lets start to configure your editor in the next step.
<!-- TODO: ## 5. Use v-model (optional)
Youre probably used to bind your data with `v-model` in forms, thats also possible with tiptap. Here is a working example component, that you can integrate in your project:
## 5. Use v-model (optional)
Youre probably used to bind your data with `v-model` in forms, thats also possible with tiptap. Here is how that would work with tiptap:
<demo name="Guide/GettingStarted/VModel" /> -->
```html
<template>
<editor-content :editor="editor" />
</template>
<script>
import { Editor, EditorContent } from '@tiptap/vue-3'
import { defaultExtensions } 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(this.modelValue, false)
},
},
mounted() {
this.editor = new Editor({
content: this.modelValue,
extensions: defaultExtensions(),
})
this.editor.on('update', () => {
this.$emit('update:modelValue', this.editor.getHTML())
})
},
beforeUnmount() {
this.editor.destroy()
},
}
</script>

View File

@ -2,7 +2,39 @@
items:
- title: Installation
link: /installation
- title: Upgrade Guide
items:
- title: CDN
link: /installation/cdn
skip: true
- title: CodeSandbox
link: /installation/codesandbox
skip: true
- title: Vue 2
link: /installation/vue2
skip: true
- title: Vue 3
link: /installation/vue3
skip: true
- title: Nuxt.js
link: /installation/nuxt
skip: true
- title: React
link: /installation/react
type: draft
skip: true
- title: Svelte
link: /installation/svelte
type: draft
skip: true
- title: Alpine.js
link: /installation/alpine
type: draft
skip: true
- title: Livewire
link: /installation/livewire
type: draft
skip: true
- title: Upgrade guide
link: /overview/upgrade-guide
- title: Become a sponsor
link: /sponsor