How to set Vue Quill Editor delta content in the Editor

Question

I am working on a Nuxt 3 Project and using Vue Quill Editor. I have successfully integrated the editor and able to save delta data on the backend. Now on a button click (Edit Button) I am getting the saved data back on the frontend and wanted to display this data on the Editor so i could Edit content and update it. Its like product detail needs modification or correction then save it again. I hope it makes sense. So far i have below code

<script setup>
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
// Getting data from database
const { data: productDetail } = await useFetch('product/27/');
const formData = ref({
  content: productDetail.value.content,
})
const submitEditProductForm = async () => {
  const fData = new FormData();
  fData.append('content', JSON.stringify(formData.value.content)); 
  await useFetch('product/update/27/', { method: 'PATCH', body: fData })
};
</script>
<template>
<div>
 <form ref="form" @submit.prevent="submitEditProductForm">
  <ClientOnly>
   <p class="mt-5">Content</p>
   <QuillEditor theme="snow" toolbar="full" placeholder="write content..." v-model:content="formData.content" />
  </ClientOnly>
  <button type="submit">Submit</button>
</div>
</template>

When i console.log(formData.value.content) i get below data This is the data which i get from the database and suppose to be display on the Editor for further editing.

{"ops":[{"attributes":{"bold":true},"insert":"Very New"},{"insert":" New content\n"}]}

If you suggest to use setContents() Method then please also tell how can i access setContents() method i mean from where i can import it or if it requires object to access then how can i create that object.

Answer 1

To set the content in the Vue Quill Editor using the delta data that you have, you can indeed use the setContents() method. This method is a part of the Quill API and can be accessed through the Quill instance that is created by the Vue Quill Editor component.

<script setup>
import { ref, onMounted } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

// Getting data from database
const { data: productDetail } = await useFetch('product/27/');
const formData = ref({
  content: productDetail.value.content,
});

const quill = ref(null);

const setEditorContent = () => {
  if (quill.value) {
    quill.value.setContents(formData.value.content.ops);
  }
};

onMounted(setEditorContent);

const submitEditProductForm = async () => {
  const fData = new FormData();
  fData.append('content', JSON.stringify(formData.value.content)); 
  await useFetch('product/update/27/', { method: 'PATCH', body: fData });
};
</script>

<template>
<div>
 <form ref="form" @submit.prevent="submitEditProductForm">
  <ClientOnly>
   <p class="mt-5">Content</p>
   <QuillEditor 
      theme="snow" 
      toolbar="full" 
      placeholder="write content..." 
      v-model:content="formData.content" 
      @ready="quill = $event"
   />
  </ClientOnly>
  <button type="submit">Submit</button>
 </div>
</template>

Hope this helps!