quill富文本（支持表格）

quill只有2.0以上版本支持表格

 npm install quill@2.0.0-dev.3 -dev–save

Editor.vue

<template>
    <div>
      <div class="editor"></div>
    </div>
</template>

<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
import '@/scss/quill.font.css'
// 增加字体大小配置项

const fontFamily = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Lisu']
const fontSize = ['ft10', 'ft12', 'ft14', 'ft16', 'ft18',"ft32",]
// const lineheight = ["", "1", "1-5", "1-75", "2", "3", "4", "5"]
export default {
	name: 'Editor',
    props: ['value','disabled','note'],
	data() {
		return {
			quill: null,
            
			options: {
				theme: 'snow',
                readOnly: this.disabled,
				modules: {
					toolbar: {
						container: [
							['bold', 'underline', 'strike','italic'],
							[{ header: 1 }, { header: 2 }],
							[{ list: 'ordered' }, { list: 'bullet' }],
							[{ indent: '-1' }, { indent: '+1' }],
							[{ color: [] }, { background: [] }],
							[{ font: fontFamily}],
							[{ align: [] }],
							['clean'],
                            [{ size: fontSize }],
                            // [{ lineheight }],//行高],
							[{ table: 'TD' }, { 'table-insert-row': 'TIR' }, { 'table-insert-column': 'TIC' }, { 'table-delete-row': 'TDR' }, { 'table-delete-column': 'TDC' }],
						],
						handlers: {
							table: function(val) {
								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()
							},
                            // lineheight: (value) => {
                            //     if (value) {
                            //         this.quill.format("lineHeight", value)
                            //     }
                            // }
						},
					},
					table: true,
                    // lineheight: true
				},
				placeholder: '',
			},
		}
	},
	mounted() {
        this.fontFormat()
		this.init()
		this.addQuillTitle()

	},
    methods: {
        init() {
            const dom = this.$el.querySelector('.editor')
            this.quill = new Quill(dom, this.options)
            this.quill.clipboard.dangerouslyPasteHTML(0, this.note) 
            //this.quill.clipboard.dangerouslyPasteHTML(0, this.value) 
            this.quill.on('text-change', () => {
                this.$emit('contentData', this.quill.root.innerHTML)
            })
            this.$el.querySelector(
                '.ql-table-insert-row'
            ).innerHTML = `<svg t="1591862376726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6306" width="18" height="200"><path d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z" p-id="6307"></path></svg>`
            this.$el.querySelector(
                '.ql-table-insert-column'
            ).innerHTML = `<svg t="1591862238963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6509" width="18" height="200"><path d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z" p-id="6510"></path></svg>`
            this.$el.querySelector(
                '.ql-table-delete-row'
            ).innerHTML = `<svg t="1591862253524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6632" width="18" height="200"><path d="M500.8 461.909333L267.306667 695.296l-45.226667-45.269333 278.741333-278.613334L779.306667 650.026667l-45.248 45.226666z" p-id="6633"></path></svg>`
            this.$el.querySelector(
                '.ql-table-delete-column'
            ).innerHTML = `<svg t="1591862261059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6755" width="18" height="200"><path d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z" p-id="6756"></path></svg>`
        },
		addQuillTitle() {
            // 设置工具栏鼠标悬浮中文提示
            const titleConfig = {
                'ql-bold': '加粗',
                'ql-color': '颜色',
                'ql-font': '字体',
                'ql-code': '插入代码',
                'ql-italic': '斜体',
                'ql-link': '添加链接',
                'ql-background': '颜色',
                'ql-size': '字体大小',
                'ql-strike': '删除线',
                'ql-script': '上标/下标',
                'ql-underline': '下划线',
                'ql-blockquote': '引用',
                'ql-header': '标题',
                'ql-indent': '缩进',
                'ql-list': '列表',
                'ql-align': '文本对齐',
                'ql-direction': '文本方向',
                'ql-code-block': '代码块',
                'ql-formula': '公式',
                'ql-image': '图片',
                'ql-video': '视频',
                'ql-clean': '清除字体样式',
                'ql-upload': '文件',
                'ql-table': '插入表格',
                'ql-table-insert-row': '插入行',
                'ql-table-insert-column': '插入列',
                'ql-table-delete-row': '删除行',
                'ql-table-delete-column': '删除列',
            }
			const oToolBar = document.querySelector('.ql-toolbar')
			const aButton = oToolBar.querySelectorAll('button')
			const aSelect = oToolBar.querySelectorAll('select')
			aButton.forEach(function(item) {
				if (item.className === 'ql-script') {
                    item.title = item.value === 'sub' ? '下标' : '上标'
				} else if (item.className === 'ql-indent') {
                    item.title = item.value === '+1' ? '向右缩进' : '向左缩进'
				} else {
					item.title = titleConfig[item.classList[0]]
				}
			})
			aSelect.forEach(function(item) {
				item.parentNode.title = titleConfig[item.classList[0]]
			})
		},
        // 自定义配置部分
        fontFormat() {
            // 自定义字体
            const fontFamilyLIst = Quill.import('formats/font')
            fontFamilyLIst.whitelist = fontFamily
            Quill.register(fontFamilyLIst, true)
            // 自定义字体大小
            const fontSizeList = Quill.import('attributors/class/size')
            fontSizeList.whitelist = fontSize
            Quill.register(fontSizeList, true)
            // // 自定义行高
            // const Parchment = Quill.import('parchment')
            // class lineHeightAttributor extends Parchment.Attributor.Class {}
            // class lineHeightAttributor extends Parchment.Attributor.Style {}
            // class lineHeightAttributor extends Parchment.Attributor.Class {}
            // const lineHeightStyle = new lineHeightAttributor(
            //     "lineheight", "line-height", "ql-lineheight",
            //     { scope: Parchment.Scope.INLINE,whitelist: lineheight }
            // )
            // Quill.register({ "formats/lineHeight": lineHeightStyle }, true)
            
        }
	},
}
</script>
<style lang="scss">
.ql-editor {
    min-height:150px; 
    height: auto;
    height:150px !important;
}
</style>

在父组件中使用

<el-form-item label="Note" prop="note">
            <Editor v-model="form.note" @contentData="contentData($event)" :disabled="isDisabled"></Editor>
 </el-form-item>
<script>
import Editor from './Editor'
export default {
	components: { Editor },
	methods: {
		contentData(val) {
            	this.form.note = val
        },
	}
}
</script>

编辑页面回显