Quill富文本编辑器表格疑问：如何添加行列？

Quill原生的table工具栏按钮仅支持插入默认2x2的表格，要实现添加行/列的功能，需要在工具栏配置中补充对应的表格操作选项，具体步骤如下：

1. 更新工具栏配置 #

修改你的Quill初始化代码，将表格相关的操作按钮添加到工具栏数组中：

const quill = new Quill('#editor', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block'],
      // 补充表格操作按钮
      ['table', 'table-row', 'table-column', 'table-delete-row', 'table-delete-column', 'table-delete']
    ],
  },
  placeholder: 'Compose an epic...',
  theme: 'snow',
});

2. 操作流程 #

• 点击工具栏的table按钮，插入一个2x2的基础表格
• 点击表格内的任意单元格，工具栏中的表格操作按钮会自动激活
  • 点击table-row：在当前单元格的下方插入新行
  • 点击table-column：在当前单元格的右侧插入新列
  • 对应删除按钮可删除目标行、列或整个表格

3. 手动API调用（可选） #

如果需要通过代码控制表格行/列的添加，可以直接调用Quill的格式化API：

// 在当前选区所在行下方插入新行
quill.format('table-row', 'add');

// 在当前选区所在列右侧插入新列
quill.format('table-column', 'add');

内容的提问来源于stack exchange，提问作者Marek M.