Vue中QuillEditor注册quill-placeholder-module报错求助

报错信息 #

index.ts:35 quill Cannot import modules/placeholders. Are you sure it was registered?
index.ts:35 quill Cannot load placeholders module. Are you sure it was registered?
index.ts:35 quill Cannot import modules/placeholders. Are you sure it was registered?

错误栈 #

6244 Uncaught (in promise) TypeError: moduleClass is not a constructor
    at SnowTheme2.addModule (chunk-KZQSO4A5.js?v=6665e073:6244:40)
    at SnowTheme2.addModule (chunk-KZQSO4A5.js?v=6665e073:6962:136)
    at chunk-KZQSO4A5.js?v=6665e073:6236:29
    at Array.forEach (<anonymous>)
    at SnowTheme2.init (chunk-KZQSO4A5.js?v=6665e073:6234:53)
    at new Quill2 (chunk-KZQSO4A5.js?v=6665e073:1139:28)
    at initialize (@vueup_vue-quill.js?v=6665e073:1295:15)
    at @vueup_vue-quill.js?v=6665e073:1273:7
    at chunk-QFRMDLSM.js?v=6665e073:4941:40
    at callWithErrorHandling (chunk-QFRMDLSM.js?v=6665e073:2282:19)

我的Vue组件代码 #

const placeholders = [
  { id: "subject", label: "Subject" },
  { id: "name", label: "Name" },
];
const options = {
  modules: {
    placeholders: placeholders,
  },
};

import getPlaceholderModule from "quill-placeholder-module";

onMounted(() => {
  const PlaceholderModule = getPlaceholderModule(Quill, {
    className: "ql-placeholder-content",
  });

  if (PlaceholderModule) {
    Quill.register("modules/placeholders", PlaceholderModule, true);
  }
});

疑问 #

请问我是否遗漏了必要步骤？

核心问题是模块注册时机太晚，同时配置格式有误，具体修正步骤如下：

1. 提前注册模块
   vueup/vue-quill的QuillEditor组件会在组件挂载前初始化Quill实例，onMounted钩子是实例创建后才触发的，此时注册模块已经来不及。需要把模块注册代码移到组件顶部、Quill实例初始化之前执行。

2. 修正配置格式
   placeholders模块的配置不能直接传数组，需要嵌套在list字段下，同时可以统一指定样式类名。

修改后的代码示例：

import { Quill } from '@vueup/vue-quill';
import getPlaceholderModule from "quill-placeholder-module";

// 提前注册占位符模块
const PlaceholderModule = getPlaceholderModule(Quill, {
  className: "ql-placeholder-content",
});
Quill.register("modules/placeholders", PlaceholderModule, true);

// 定义占位符列表
const placeholdersList = [
  { id: "subject", label: "Subject" },
  { id: "name", label: "Name" },
];

// 正确配置Quill选项
const options = {
  modules: {
    placeholders: {
      list: placeholdersList,
      className: "ql-placeholder-content"
    },
  },
};

3. 额外注意

• 确保@vueup/vue-quill与quill-placeholder-module版本兼容，避免版本不匹配导致构造函数异常
• 如果使用Vue3的<script setup>语法，严格保证导入和注册顺序：先导入Quill和模块，再注册模块，最后定义配置选项

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