先看结果：
必要条件：
1.需要quill版本为2.0的开发版（发布正式版只有1.0的）
使用npm view quill查看版本，最新的dev版本为dev.4，官方文档好像是说按得dev.3
我直接按的dev.4：npm install quill@2.0.0-dev.4 --save
2.准备图标
参考文章：quill-editor 2.0 集成 vue - 简书
默认的只有一个图标（插入表格的），增加行、列的需要自己弄一下。以下是图标代码。后面整体代码有使用。
const ICON_SVGS = {
'table-insert-row': `<svg viewbox="0 0 18 18">
<g class="ql-fill ql-stroke ql-thin ql-transparent">
<rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="2.5"></rect>
<rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="12.5"></rect>
</g>
<rect class="ql-fill ql-stroke ql-thin" height="3" rx="0.5" ry="0.5" width="7" x="8.5" y="7.5"></rect>
<polygon class="ql-fill ql-stroke ql-thin" points="4.5 11 2.5 9 4.5 7 4.5 11"></polygon>
<line class="ql-stroke" x1="6" x2="4" y1="9" y2="9"></line>
</svg>`,
'table-insert-column': `<svg viewbox="0 0 18 18">
<g class="ql-fill ql-transparent">
<rect height="10" rx="1" ry="1" width="4" x="12" y="2"></rect>
<rect height="10" rx="1" ry="1" width="4" x="2" y="2"></rect>
</g>
<path class="ql-fill" d="M11.354,4.146l-2-2a0.5,0.5,0,0,0-.707,0l-2,2A0.5,0.5,0,0,0,7,5H8V6a1,1,0,0,0,2,0V5h1A0.5,0.5,0,0,0,11.354,4.146Z"></path>
<rect class="ql-fill" height="8" rx="1" ry="1" width="4" x="7" y="8"></rect>
</svg>`,
'table-delete-row': `<svg viewbox="0 0 18 18">
<g class="ql-fill ql-stroke ql-thin ql-transparent">
<rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="2.5"></rect>
<rect height="3" rx="0.5" ry="0.5" width="7" x="4.5" y="12.5"></rect>
</g>
<rect class="ql-fill ql-stroke ql-thin" height="3" rx="0.5" ry="0.5" width="7" x="8.5" y="7.5"></rect>
<line class="ql-stroke ql-thin" x1="6.5" x2="3.5" y1="7.5" y2="10.5"></line>
<line class="ql-stroke ql-thin" x1="3.5" x2="6.5" y1="7.5" y2="10.5"></line>
</svg>`,
'table-delete-column': `<svg viewbox="0 0 18 18">
<g class="ql-fill ql-transparent">
<rect height="10" rx="1" ry="1" width="4" x="2" y="6"></rect>
<rect height="10" rx="1" ry="1" width="4" x="12" y="6"></rect>
</g>
<rect class="ql-fill" height="8" rx="1" ry="1" width="4" x="7" y="2"></rect>
<path class="ql-fill" d="M9.707,13l1.146-1.146a0.5,0.5,0,0,0-.707-0.707L9,12.293,7.854,11.146a0.5,0.5,0,0,0-.707.707L8.293,13,7.146,14.146a0.5,0.5,0,1,0,.707.707L9,13.707l1.146,1.146a0.5,0.5,0,0,0,.707-0.707Z"></path>
</svg>`
}初步接触疑惑之处：
看了官方文档和其他博客文章后，蒙了，导致版本和扩展插件理解错了。其实quill@1.0的版本不支持表格。我以为升级到2.0后+quill-better-table扩展插件，就可以了。发现增加列、行不行，查看源代码，发现没有相应的方法。最后发现，根本不用扩展插件。quill@2.0的dev版本已经有了（不清楚是dev.4比dev.3增加了，还是怎么回事）。
升级了2.0-dev.4，直接就有以上功能了（见代码）
html部分：
<div class="myQuillEditor" v-loading="quillUpdateImg">
<el-upload
class="avatar-uploader"
:action="serverUrl"
name="img"
:headers="header"
:show-file-list="false"
:on-success="uploadSuccess"
:on-error="uploadError"
:before-upload="beforeUpload"
style="display:none">
</el-upload>
<quill-editor id="myQuillEditor" v-model="emergPlanData.disStep" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
</quill-editor>
</div>js部分：
import Quill from 'quill'
import _ from 'lodash'
const ICON_SVGS = {
....这里就不写了，复制上面的代码吧。
}
// 工具栏我做删减，table那部分是表格需要用的
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
//['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
// [{ 'list': 'ordered' }, { 'list': 'bullet' }],
//[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
//[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
//[{ 'direction': 'rtl' }], // text direction
// [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
//[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
//[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
// [{ 'font': [] }],
// [{ 'align': [] }],
//---开始
[
{'table': 'TD'},
{'table-insert-row': 'TIR'},
{'table-insert-column': 'TIC'},
{'table-delete-row': 'TDR'},
{'table-delete-column': 'TDC'}
],
//---结束
['image'],
['clean'] // remove formatting button
]
export default {
data() {
return {
editorOption: {
placeholder: '',
theme: 'snow', // or 'bubble'
modules: {
table: true, // 设为true
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
// 增加表格的5个触发方法
'table': function (val) {
console.log('table====',this.quill.getModule('table'))
this.quill.getModule('table').insertTable(2, 3)
},
'table-insert-row': function () {
this.quill.getModule('table').insertRowBelow()
},
'table-insert-column': function () {
this.quill.getModule('table').insertColumnRight()
},
'table-delete-row': function () {
this.quill.getModule('table').deleteRow()
},
'table-delete-column': function () {
this.quill.getModule('table').deleteColumn()
}
}
},
// 下面是图片的扩展插件（图片支持调整大小）不需要可删掉
imageResize: {
displayStyles: {
backgroundColor: 'black',
border: 'none',
color: 'white',
},
modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
},
// imageDrop: true
}
}, // 富文本编辑器配置
}
},
mounted(){
this._initCustomToolbarIcon()
// 如果你的富文本是在页面中，写在mounted中即可，但我的是在弹窗，所以挪到了下面弹窗事件里
// let dom = this.$refs.myQuillEditor.$el
// this.quill = new Quill(dom, this.editorOption);
},
methods: {
_initCustomToolbarIcon () {
// 获取quill的原生图标库
let icons = Quill.import('ui/icons')
// 从自定义图标SVG列表中找到对应的图标填入到原生图标库中
_.forEach(ICON_SVGS, (iconValue, iconName) => {
icons[iconName] = iconValue
})
},
// 我的需求是在弹窗里实现的富文本编辑，因此下面代码放在了弹窗的事件里
showDialog(){
this.$nextTick(() => {
setTimeout(() => {
// let content = document.getElementById('myQuillEditor');
let dom = this.$refs.myQuillEditor.$el
this.quill = new Quill(dom, this.editorOption);
})
})
}
},
}这样就完成了
遇到的问题：
在获取弹窗的编辑器dom时，获取不到。
看到的文章是这么写的：let dom = this.$el.querySelector(".myQuillEditor"）打印$el，没有弹窗的元素。后来用et content = document.getElementById('myQuillEditor');测了下可以。
然后就使用了ref来获取
let dom = this.$refs.myQuillEditor.$el
this.quill = new Quill(dom, this.editorOption);
看了半天资料，哎，咋写的都有。
推荐这个：（他也是跳到了其他文章，帮我解决了改问题）vue-quill-editor+vue-better-table结合使用,实现表格插入/合并等问题; - 夏小夏吖 - 博客园