mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 06:03:22 +08:00
docs: update content
This commit is contained in:
parent
c10093fbcf
commit
a997b647f4
@ -99,7 +99,61 @@ export default {
|
||||
|
||||
You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step.
|
||||
|
||||
<!-- TODO: ## 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:
|
||||
## 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:
|
||||
|
||||
<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>
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user