@vueup/vue-quill使用quill-better-table报moduleClass is not a constructor
quill官方中文文档：https://www.kancloud.cn/liuwave/quill/1434144
扩展表格的使用
注意：想要使用表格 quill的版本要是2.0以后 升级到这个版本后 其他一些插件就注册不了了。
安装：
-
npm install quill@latest 版本需要大于2.0版本
-
npm install quill-better-table
引入&注册
import Quill from 'quill'
import 'quill/dist/quill.snow.css'import QuillBetterTable from 'quill-better-table'
import 'quill-better-table/dist/quill-better-table.css'Quill.register({'modules/better-table': QuillBetterTable
}, true)使用：
1.在toolbar-container 中增加表格的按钮
<quill-editorref='quillEditorRef'v-model:content='content'contentType='html':options='options':style='styles'/>
const options = ref({theme: 'snow',modules: {toolbar: {container: [['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线['blockquote', 'code-block'], // 引用 代码块[{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表[{ indent: '-1' }, { indent: '+1' }], // 缩进[{ size: ['small', false, 'large', 'huge'] }], // 字体大小[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色[{ align: [] }], // 对齐方式['clean'], // 清除文本格式['link', 'image', 'video'], // 链接、图片、视频[{ 'table': 'TD' },],],//点击生成图表初始生成一个3*3图表handlers: {'table': function () {this.quill.getModule('better-table').insertTable(3, 3)},},},table: false,'better-table': {operationMenu: {items: {insertColumnRight: {// text: 'Insert column right'text: '右侧插入列'},insertColumnLeft: {// text: 'Insert column left'text: '左侧插入列'},insertRowUp:{// text: 'Insert row up'text: '上方插入行'},insertRowDown:{// text: 'Insert row down'text: '下方插入行'},mergeCells: {// text: 'Merge cells'text: '合并单元格'},unmergeCells: {// text: 'Another unmerge cells name'text: '取消合并单元格'},deleteColumn: {// text: 'Delete column'text: '删除列'},deleteRow:{// text: 'Delete row'text: '删除行'},deleteTable:{// text: 'Delete table'text: '删除表格'}},background: {color: '#333'},color: {colors: ['green', 'red', 'yellow', 'blue', 'white'],text: 'background:'}}},keyboard: {bindings: QuillBetterTable.keyboardBindings}},placeholder: 'Insert text here ...'}
)问题：moduleClass is not a constructor，说明vueup/vue-quill没找到quill-better-table依赖，原因是虽然你的quill是2.0.0以上，但是vueup/vue-quill版本还是在2.0.0一下
1.检查你的vueup/vue-quill版本（查看 Quill 版本）
npm list quill
从输出的 npm list quill 可以看到，项目中同时存在两个不同版本的 quill：
@vueup/vue-quill@1.2.0依赖的quill版本是1.3.7。- 你的项目直接安装了
quill@2.0.2，并且quill-better-table@1.2.10依赖的也是quill@2.0.2。
由于 @vueup/vue-quill 依赖的是 quill@1.3.7，而你想使用的 quill-better-table 需要 quill@2.x，这导致了版本冲突。Quill 的多个版本会引起模块注册和使用时的各种问题，例如模块找不到或无法正确初始化。
解决方案
要解决这个问题，你需要确保整个项目只使用一个版本的 Quill。因为 @vueup/vue-quill 目前依赖 quill@1.3.7，而你需要使用 quill@2.x，这有几种可能的解决方案：
1.强制 @vueup/vue-quill 使用 quill@2.x：
- 由于
@vueup/vue-quill的当前版本依赖于quill@1.3.7，你可以尝试通过npm的overrides功能（如果你使用的是npm 7或更高版本）来强制将quill的版本指定为2.x。
在你的 package.json 中添加以下内容：
"overrides": {"quill": "^2.0.2"
}
然后运行 npm install。
2.使用 Yarn 的 resolutions：
- 如果你使用的是 Yarn，可以在
package.json中添加以下字段来强制quill使用2.x版本：
-
"resolutions": {"quill": "^2.0.2" }然后运行
yarn install。 -
3手动修改依赖：
- 如果以上方法都不起作用，最后一种方法是手动修改
@vueup/vue-quill的package.json，将quill依赖改为^2.0.2，然后在项目中手动链接修改后的vue-quill版本。这种方法不太推荐，除非你对整个项目的依赖链有充分的了解。
- 如果以上方法都不起作用，最后一种方法是手动修改