在Nuxt 3中如何为Vue Quill Editor设置Delta内容

1. 获取Quill编辑器实例引用 #

要调用setContents()方法，首先需要拿到编辑器的实例。在组件中通过ref绑定编辑器组件：

<template>
  <QuillEditor 
    ref="quillEditor" 
    v-model:content="editorContent"
    :toolbar="toolbarOptions"
    <!-- 其他配置项 -->
  />
</template>

<script setup>
import { ref } from 'vue'
// 存储编辑器实例的引用
const quillEditor = ref(null)
// 绑定编辑器内容的响应式变量
const editorContent = ref(null)
// 工具栏配置（根据你的需求调整）
const toolbarOptions = [['bold', 'italic'], ['link', 'image']]
</script>

2. 加载后端数据并调用setContents() #

当从后端获取到Delta数据后，确保编辑器已初始化完成，再调用实例的setContents()方法加载数据：

// 示例：从后端获取已保存的Delta数据
async function loadSavedContent() {
  // 替换为你的实际接口请求逻辑
  const response = await $fetch('/api/products/1/detail')
  const savedDelta = response.delta

  // 检查编辑器实例是否存在（避免初始化前调用）
  if (quillEditor.value) {
    // 调用setContents加载Delta数据
    quillEditor.value.quill.setContents(savedDelta)
    // 同步更新v-model绑定的变量（可选，确保双向绑定一致）
    editorContent.value = savedDelta
  }
}

// 点击编辑按钮时触发该函数
const handleEditClick = () => {
  loadSavedContent()
}

3. 关键注意事项 #

• 确认后端返回的是标准Delta格式，结构需包含ops数组，例如：

{
  "ops": [
    { "insert": "产品详情内容" },
    { "insert": "\n", "attributes": { "heading": 1 } },
    { "insert": "这是加粗的文本", "attributes": { "bold": true } }
  ]
}

• 不要在组件未挂载完成时调用setContents()，比如直接在setup顶层执行，此时quillEditor.value仍为null
• 如果是页面初始化时自动加载数据，可将loadSavedContent()放在onMounted钩子中执行

内容的提问来源于stack exchange，提问作者Johnny