如何在Nuxt 3项目中集成并实现Quill编辑器？

由于Nuxt 3是SSR框架，Quill编辑器依赖浏览器DOM，需要做针对性适配，以下是迁移实现步骤：

1. 创建客户端专属插件（全局注册组件） #

在项目的plugins目录下创建quill.client.ts（.client后缀表示仅在客户端环境加载），用于注册Quill组件和图片上传模块：

import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import ImageUploader from 'quill-image-uploader'
import Quill from 'quill'

// 注册图片上传模块到Quill
Quill.register('modules/imageUploader', ImageUploader)

export default defineNuxtPlugin((nuxtApp) => {
  // 全局注册QuillEditor组件，无需在每个组件重复导入
  nuxtApp.vueApp.component('QuillEditor', QuillEditor)
})

2. 编写编辑器组件（适配Nuxt 3组合式API） #

创建你的编辑器组件（比如components/Observacao.vue），使用Nuxt 3推荐的<script setup>语法，同时用<ClientOnly>包裹编辑器避免SSR阶段DOM报错：

<template>
  <div id="quill">
    <ClientOnly fallback="加载编辑器中...">
      <QuillEditor 
        v-model:content="texto" 
        content-type="html" 
        theme="snow" 
        toolbar="full" 
        :modules="modules" 
      />
    </ClientOnly>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 若使用Vuex获取token，导入useStore
import { useStore } from 'vuex'

const store = useStore()
const texto = ref('')

// 配置图片上传模块逻辑
const modules = ref({
  imageUploader: {
    upload: (file) => {
      return new Promise((resolve, reject) => {
        const token = store.getters.token
        const formData = new FormData()
        formData.append('image', file)

        fetch('http://localhost:3000/api/dashboard/observacao', {
          method: 'POST',
          headers: {
            'auth-token': token
            // 无需手动设置Content-Type，FormData会自动处理multipart/form-data格式
          },
          body: formData
        })
        .then(resp => resp.json())
        .then(res => resolve(res.url))
        .catch(err => {
          reject('Upload failed')
          console.error('图片上传错误:', err)
        })
      })
    }
  }
})
</script>

3. 关键注意事项 #

• 依赖确认：确保已安装所需依赖：

  npm install @vueup/vue-quill@latest quill-image-uploader
  

• 状态管理适配：如果已迁移到Nuxt 3推荐的Pinia，替换Vuex用法为：

  import { useAuthStore } from '~/stores/auth'
  const authStore = useAuthStore()
  const token = authStore.token
  

• 样式处理：插件中已全局引入snow.css，若需自定义主题，可在组件内单独导入其他样式文件。
• 客户端渲染强制：必须用<ClientOnly>包裹QuillEditor，否则SSR阶段会因找不到DOM节点抛出错误。

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