前端 javascript Quill富文本编辑器的使用（使用富文本编辑器展示html的内容（包含表格）可以编辑）

1.quill的容器

2.初始化quill

const dom = this.$el.querySelector('.editor')

this.quill = new Quill(dom, this.options)

// 给表格赋值

this.quill.clipboard.dangerouslyPasteHTML(this.content);

this.quill.on('text-change', () => {

// console.log(this.quill.getContents())

// this.$emit('contentData', this.quill.getContents())

console.log(this.quill.root.innerHTML)

this.$emit('contentData', this.quill.root.innerHTML)

})

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 = ``

3.富文本编辑器工具栏按钮和下拉选择框的标题

addQuillTitle () {

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.value === 'sub' ? (item.title = '下标') : (item.title = '上标')

} else if (item.className === 'ql-indent') {

item.value === '+1' ? (item.title = '向右缩进') : (item.title = '向左缩进')

} else {

item.title = titleConfig[item.classList[0]]

}

})

aSelect.forEach(function (item) {

item.parentNode.title = titleConfig[item.classList[0]]

})

},

4.富文本编辑器的标题

options: {

theme: 'snow',

modules: {

toolbar: {

container: [

['bold', 'italic', 'underline', 'strike'],

[{ header: 1 }, { header: 2 }],

[{ color: [] }, { background: [] }],

[{ list: 'ordered' }, { list: 'bullet' }],

[{ align: [] }],

[{ indent: '-1' }, { indent: '+1' }],

['link','image','video'],

[

{ 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()

}

}

},

table: true

},

placeholder: ''

}

5.全部代码

效果：

精彩链接

 您阅读本篇文章共花了：