使用quill-better-table插件，官网GitCode - 全球开发者的开源社区,开源代码托管平台
安装
首先quill-better-table插件，官网有写需要 quills v2.0.0-dev3
我这里使用的是 quills v2.0.0-dev4，自行安装
然后就是安装我们的插件 quill-better-table
npm install quill-better-table使用
<template><div class="publish-form-container"><!-- TODO: 表单内容 --><div ref="quillEditorRef" class="quill-editor"></div></div></template><script>import Quill from 'quill';import 'quill/dist/quill.snow.css';import QuillBetterTable from 'quill-better-table' // 可编辑的tableimport 'quill-better-table/dist/quill-better-table.css' import ImageResize from 'quill-image-resize' // 图片位置 以及 改变图片大小Quill.register({'modules/better-table': QuillBetterTable,'modules/imageResize': ImageResize,}, true)export default {name: 'PublishForm',data() {return {title: '',type: '',content: '',};},mounted() {this.initQuillEditor();},methods: {initQuillEditor() {const self = this;this.quillEditor = new Quill(this.$refs.quillEditorRef, {modules: {toolbar: {container:[[{ font: ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'] }],['bold', 'italic', 'underline', 'strike'],['blockquote', 'code-block'],[{ header: 1 }, { header: 2 }],[{ list: 'ordered' }, { list: 'bullet' }],[{ script: 'sub' }, { script: 'super' }],[{ indent: '-1' }, { indent: '+1' }],[{ direction: 'rtl' }],[{ size: ['small', false, 'large', 'huge'] }],[{ header: [1, 2, 3, 4, 5, 6, false] }],[{ color: [] }, { background: [] }],[{ align: [] }],['clean'],['link', 'image'],['table'],],handlers: {'table': function () {this.quill.getModule('better-table').insertTable(3, 3)},},},table: false,'better-table': { // 表格设置operationMenu: {items: { // 鼠标右键菜单设置,如将某一项设置false则右键菜单不会显示 如 insertColumnRight: falseinsertColumnRight: { text: '右边插入一列' },insertColumnLeft: { text: '左边插入一列' },insertRowUp: { text: '上边插入一行' },insertRowDown: { text: '下边插入一行' },mergeCells: { text: '合并单元格' },unmergeCells: { text: '拆分单元格' },deleteColumn: { text: '删除列' },deleteRow: { text: '删除行' },deleteTable: { text: '删除表格' }},background: {color: '#333'},color: {colors: ['green', 'red', 'yellow', 'blue', 'white'],text: '背景颜色:'}}},imageResize: {displayStyles: {backgroundColor: 'black',border: 'none',color: 'white'},modules: ['Resize', 'DisplaySize', 'Toolbar']},keyboard: {bindings: QuillBetterTable.keyboardBindings}},theme: 'snow',});// 监听编辑器内容的变化this.quillEditor.on('text-change', function (delta, oldDelta, source) {self.content = self.quillEditor.root.innerHTML;});},}};</script>效果
参考：vue项目 quill 富文本支持表格_quill-better-table-CSDN博客
