vue-quill-editor使用表格

Vue-Quill-Editor是一个基于Quill富文本编辑器的Vue组件，它允许你在Vue应用中添加丰富的文本输入功能，包括支持插入表格。在Vue-Quill-Editor中，你可以通过以下步骤来使用表格功能：

1. 首先，在项目中安装`vue-quill-editor`库：

   npm install vue-quill-editor

2. 引入并注册组件到Vue实例中：

import QuillEditor from 'vue-quill-editor';

components: {
  QuillEditor,
},

3. 在模板中创建一个QuillEditor实例，并启用表格插件：

<quill-editor v-model="editorContent" :modules="{'toolbar': {containers: ['bold', 'italic', '|', 'align']}, 'formula': true, 'table': true}"></quill-editor>

这里`:modules`选项告诉组件你需要哪些模块，'table'表示开启表格功能。

4. 初始化数据，可以设置一个空字符串作为初始内容：

data() {
  return {
    editorContent: '',
  };
}

5. 当你想要在前端操作表格时，可以直接在`editorContent`中编写HTML，如插入行、列、单元格等。例如：

<!-- 插入一个表格 -->
<div contenteditable="true">插入表格 <br><br> <table border="1">
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
</table></div>

<!-- 使用Quill的API更新内容 -->
methods: {
  updateTable() {
    this.editorContent = '<h1>New Table</h1>' + this.editorContent; // 添加标题示例
  },
}