在NuxtJS 3中为Vue Quill Editor加模块遇构造函数错误求助

我在NuxtJS 3中尝试为Vue Quill Editor添加quill-image-uploader和quill-blot-formatter模块，按照官方指引编写代码后，运行时出现上述错误。

我的代码 #

Template部分 #

<client-only v-if="changeContent">
  <quill-editor
   v-model:content="content"
   content-type="html"
   theme="snow"
   toolbar="full"
   :modules="modules"
  />
</client-only>

Script部分 #

<script setup lang="ts">
  import '@vueup/vue-quill/dist/vue-quill.snow.css'
  import EditIcon from '@/assets/icons/edit.svg'
  import SaveIcon from '@/assets/icons/save.svg'

  let modules: {}
  if (!process.server) {
    const { QuillEditor, Quill } = await import('@vueup/vue-quill')
    const { vueApp } = useNuxtApp()
    if (!vueApp._context.components.QuillEditor)
      vueApp.component('QuillEditor', QuillEditor)

    const ImageUploader = await import('quill-image-uploader')
    const BlotFormatter = await import('quill-blot-formatter')

    modules = [
      {
        name: 'imageUploader',
        module: ImageUploader,
        upload: (file: any) => {
          return new Promise((resolve, reject) => {
            const formData = new FormData()
            formData.append('image', file)
          })
        }
      },
      {
        name: 'blotFormatter',
        module: BlotFormatter,
        options: {}
      }
    ]
  }
</script>

报错信息 #

TypeError: moduleClass is not a constructor
at SnowTheme2.addModule (quill.js:6130:28)
at SnowTheme2.addModule (quill.js:6774:121)
at quill.js:6122:17
at Array.forEach (<anonymous>)
at SnowTheme2.init (quill.js:6120:41)
at new Quill2 (quill.js:1163:16)
at initialize (vue-quill.esm-bundler.js:144:21)
at vue-quill.esm-bundler.js:118:13
at runtime-core.esm-bundler.js:2739:40
at callWithErrorHandling (runtime-core.esm-bundler.js:157:22)

解决方案 #

错误核心有两点：

1. 动态导入未获取模块默认导出：quill-image-uploader和quill-blot-formatter都是默认导出模块，直接import得到的是包含default属性的对象，必须取出default才能拿到模块构造函数。
2. modules配置格式错误：Vue Quill的modules属性要求传入对象，而非数组，每个模块对应对象的一个键值对。

修改后的Script代码：

<script setup lang="ts">
  import '@vueup/vue-quill/dist/vue-quill.snow.css'
  import EditIcon from '@/assets/icons/edit.svg'
  import SaveIcon from '@/assets/icons/save.svg'

  let modules: Record<string, any> = {}
  if (!process.server) {
    const { QuillEditor, Quill } = await import('@vueup/vue-quill')
    const { vueApp } = useNuxtApp()
    if (!vueApp._context.components.QuillEditor) {
      vueApp.component('QuillEditor', QuillEditor)
    }

    // 取出默认导出的模块构造函数
    const { default: ImageUploader } = await import('quill-image-uploader')
    const { default: BlotFormatter } = await import('quill-blot-formatter')

    // 先注册Quill模块
    Quill.register('modules/imageUploader', ImageUploader)
    Quill.register('modules/blotFormatter', BlotFormatter)

    // 配置modules为对象格式
    modules = {
      imageUploader: {
        upload: (file: File) => {
          return new Promise((resolve, reject) => {
            const formData = new FormData()
            formData.append('image', file)
            // 补充实际上传接口逻辑，示例：
            // fetch('/api/upload', { method: 'POST', body: formData })
            //   .then(res => res.json())
            //   .then(data => resolve(data.imageUrl))
            //   .catch(err => reject(err))
          })
        }
      },
      blotFormatter: {}
    }
  }
</script>

额外注意：

• 必须先通过Quill.register完成模块注册，再在modules对象中配置参数。
• 上传逻辑需要补充实际接口调用，否则Promise会一直处于pending状态，导致编辑器功能异常。

内容的提问来源于stack exchange，提问作者Nguyen Van Chau