@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-editor
      ref='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 版本。这种方法不太推荐，除非你对整个项目的依赖链有充分的了解。