@vueup/vue-quill使用quill-better-table报moduleClass is not a constructor

本文主要是介绍@vueup/vue-quill使用quill-better-table报moduleClass is not a constructor，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

quill官方中文文档：https://www.kancloud.cn/liuwave/quill/1434144

扩展表格的使用

注意：想要使用表格 quill的版本要是2.0以后 升级到这个版本后 其他一些插件就注册不了了。

安装：

1. npm install quill@latest   版本需要大于2.0版本

2. 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：

1. @vueup/vue-quill@1.2.0 依赖的 quill 版本是 1.3.7。
2. 你的项目直接安装了 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 版本。这种方法不太推荐，除非你对整个项目的依赖链有充分的了解。

这篇关于@vueup/vue-quill使用quill-better-table报moduleClass is not a constructor的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---