CODEWITHSUNDEEP
vue.jsvuejs3tiptap
Brunno Vert
Brunno Vert

Reputation: 85

How to update TipTap content dynamically with Vue 3?

I was able to set the initial value of the content from the editor with the value of a ref, but it doesn't update the content when the value of the ref changes.

Would anyone have an idea how to do it?

<editor-content
  :editor="editor" 
  v-model:content="
/>

<script setup>
  import { ref } from 'vue'
  import { useEditor, EditorContent } from '@tiptap/vue-3'
  import StarterKit from '@tiptap/starter-kit'

  const generatedText = ref('<p>Hello!</p>')

  /* editor */
  const editor = useEditor({
  content: generatedText.value,
  extensions: [
    StarterKit,
  ],
  onUpdate: ({editor}) => {
     generatedText.value = editor.getHTML()
    }
  })
</script>

Sorry if the question is too silly, I couldn't find an answer in the documentation.

Thank you for your help!

Upvotes: 2

Views: 3873

Answers (2)

apolwla
apolwla

Reputation: 66

I watched for the editor, then set the content:

import { watch } from 'vue'
import { useEditor } from '@tiptap/vue-3'

const editor = useEditor({
    content: ''
})

watch(editor, () => {
  editor?.value?.commands.setContent('<p>Hi Mars</p>')
})

Upvotes: 3

orakley
orakley

Reputation: 11

How will the generatedText be generated? Through tiptap?

The v-model of tiptap is the editor.content value. You could give it an initial state but if you want to change the editor.content after some interaction with the wysiwyg (like onFocus) you could use: setContent

Or maybe this helps: Listening for changes

Upvotes: 1

Related Questions