Javascript 如何在QuillJS2.0中初始化表。？

如何在QuillJS2.0中初始化表

我尝试在工具栏中使用table关键字，它显示了table图标，但我无法创建表

---

创建编辑器时，请尝试提供表格模块，如下所示：

var editor = new Quill( '#editor', {
    theme: 'snow',
    modules: {
        table: true
    }
} );

然后只参考表模块：

const table = editor.getModule('table');

使用表变量，可以为表触发不同的方法：

table.insertTable(2, 2);

---

可以在这里找到完整的示例：

我非常喜欢Quill的可扩展性。 我实现了一个模块来添加对表的支持。 希望QuillBetterTable能够帮助需要在quilljs中编辑/渲染表格的人。

---

需求：quill.js v2.0.0-dev.3

在向quill.js添加表时，似乎有一种代码的和平：

---

这是可行的，但是为什么按钮在工具栏之外呢？模块是否未完成？问题队列很难跟进。这不是很有用，因为当您尝试在单元格中添加项目符号列表时，它不会。它实际上是在表外单独写一行。试试你的小提琴。你有没有找到一个解决方案，允许你使用工具栏中的控件中的表格模块？这不是很有用，因为当你尝试在单元格中添加项目符号列表时，它不是很有用。它实际上是在表外单独写一行。试试你的代码笔例子。。

var bubble = new Quill('#bubble-container', {
  theme: 'bubble',
  modules: {
    table: true,
  }
});
var snow = new Quill('#snow-container', {
  theme: 'snow',
  modules: {
    table: true,
  }
});
var output = new Quill('#output-container', {
  theme: 'bubble',
  modules: { table: true },
  readOnly: true,
})
bubble.on('text-change', function(delta, old, source) {
  if (source === 'user') {
    snow.updateContents(delta, 'api');
    updateOutput();
  }
});
const table = snow.getModule('table');
snow.on('text-change', function(delta, old, source) {
  if (source === 'user') {
    bubble.updateContents(delta, 'api');
    updateOutput();
  }
});

function updateOutput() {
  const bubbleContent = bubble.getContents();
  const snowContent = snow.getContents();
  // TODO compare
  output.setContents(bubbleContent);
  const outputContent = output.getContents();
  // TODO compare outputContent
}


document.querySelector('#insert-table').addEventListener('click', function() {
  table.insertTable(3, 3);
});
document.querySelector('#insert-row-above').addEventListener('click', function() {
  table.insertRowAbove();
});
document.querySelector('#insert-row-below').addEventListener('click', function() {
  table.insertRowBelow();
});
document.querySelector('#insert-column-left').addEventListener('click', function() {
  table.insertColumnLeft();
});
document.querySelector('#insert-column-right').addEventListener('click', function() {
  table.insertColumnRight();
});
document.querySelector('#delete-row').addEventListener('click', function() {
  table.deleteRow();
});
document.querySelector('#delete-column').addEventListener('click', function() {
  table.deleteColumn();
});
document.querySelector('#delete-table').addEventListener('click', function() {
  table.deleteTable();
});