富文本要使用官网quill: doc.quilljs.cn/1409366
第一种方式：手写
参考demo:
package.json: "quill": "^2.0.0-dev.3"
<div class="editor"></div>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
data里面的
quill:null,
options: {
theme: 'snow',
placeholder: '请输入公告正文',
modules: {
toolbar: {
container: [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote'],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: 'ordered' }, { list: 'bullet' }],
[{ indent: '-1' }, { indent: '+1' }], // outdent/indent
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ align: [] }],
['link', 'image'],
[
{ 'table': 'TD' },
{ 'table-insert-row': 'TIR' },
{ 'table-insert-column': 'TIC' },
{ 'table-delete-row': 'TDR' },
{ 'table-delete-column': 'TDC' }
]
], // 工具栏
handlers: {
image (value) {
if (value) {
document.getElementById('trigger-upload').click()
} else {
this.quill.format('image', false)
}
},
'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()
}
}
},
table: true
}
mounted () {
let dom = this.$el.querySelector('.editor')
this.quill = new Quill(dom, this.options);
this.quill.setContents(this.value)
this.quill.on('text-change', () => {
this.$emit('input', this.quill.getContents())
})
this.$el.querySelector('.ql-table-insert-row').innerHTML = `—`
this.$el.querySelector('.ql-table-insert-column').innerHTML = `|`
this.$el.querySelector('.ql-table-delete-row').innerHTML = `-—`
this.$el.querySelector('.ql-table-delete-column').innerHTML = `-|`
},
最后保存的时候获取编辑器里面的内容：
this.content = this.quill.root.innerHTML
第二种方式： 使用quill-better-table插件
参考demo:
