vue.js - 尝试将表格插入鹅毛笔编辑器时出现错误 "[Parchment] Unable to create table blot"

Question

在使用 quill 编辑器的 vue.js 应用程序中 - 由模块 vue-quill-editor 提供。我想使用 npm 模块“quill-better-table”提供的模块“better-table”来增强编辑器的表编辑功能。

当我尝试将表格插入编辑器时，我收到错误消息

quill.js:148 Uncaught Error: [Parchment] Unable to create table blot
    at new ParchmentError (quill.js:148)
    at Object.create (quill.js:178)
    at TableCellLine.ShadowBlot.wrap (quill.js:5875)
    at TableCellLine.FormatBlot.wrap (quill.js:3683)
    at TableCellLine.optimize (quill-better-table.js:1360)
    at optimize (quill.js:7258)
    at LinkedList.forEach (quill.js:7121)
    at ScrollBlot.optimize (quill.js:7288)
    at Scroll.optimize (quill.js:4379)
    at ScrollBlot.update (quill.js:7331)

更具体地说，我循环收到此错误消息，直到浏览器崩溃。

我只显示代码的相关部分(希望如此):

main.ts:

import VueQuillEdtitor, { Quill } from 'vue-quill-editor';
import quillBetterTable from 'quill-better-table';

(window as any).Quill = Quill;
Quill.register("modules/better-table", quillBetterTable);

Vue.use(VueQuillEdtitor);

HtmlEditor.vue:

  <quill-editor v-model="content"
                ref="editor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>
....
import { Quill } from 'vue-quill-editor';
....

  data() {
    return {
      editorOption: {
        debug: "debug",
        theme: "snow",
        modules: {
          toolbar : false, 
          "better-table": true
        }
      }
    };
  },
  computed: {
    editor(): Quill {
      return (this.$refs.editor as any).quill
    }
  },
....

  methods: {
    insertTable() {
      const tableModule = this.editor.getModule('better-table');
      tableModule.insertTable(3, 3);
    },

我本以为调用方法 insertTable 会将表插入到编辑器中，但我却在循环中遇到异常。

Answer 1

vue-quill-editor 使用的是 quill 版本 1.3.4 (s.f. https://github.com/surmon-china/vue-quill-editor/blob/master/package.json )。 quill-better-table 需要 quilljs v2.0.0-dev.3。

它们不兼容。