当尝试将一个表格插入到羽毛笔编辑器中时，我得到一个错误"[Parchment] Unable to create table blot“

Question

在vue.js应用程序中，使用模块vue- quill -editor提供的quill编辑器。我想使用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。

它们是不兼容的。