如何在编辑器中设置 Vue Quill Editor 增量内容

Question

我正在开发 Nuxt 3 项目并使用 Vue Quill Editor。我已成功集成编辑器并能够在后端保存增量数据。现在，单击按钮（编辑按钮），我将保存的数据返回到前端，并希望在编辑器上显示此数据，以便我可以编辑内容并更新它。就像产品详细信息需要修改或更正然后再次保存一样。我希望这是有道理的。 到目前为止我有以下代码

<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>

当我

console.log(formData.value.content)

我得到以下数据时，这是我从数据库中获取的数据，并假设显示在编辑器上以供进一步编辑。

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

如果您建议使用 setContents() 方法，那么还请告诉我如何访问 setContents() 方法，我的意思是从哪里可以导入它，或者如果它需要对象来访问，那么我如何创建该对象。

Answer 1

要使用您拥有的增量数据在 Vue Quill Editor 中设置内容，您确实可以使用

setContents()

方法。此方法是 Quill API 的一部分，可以通过 Vue Quill Editor 组件创建的 Quill 实例进行访问。

<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>

希望这有帮助！