项目需要在原有的quill富文本编辑器中加上表格的功能(参考的第一个文章实现的表格不需要quill-better-table,但没有合并等功能)
安装依赖:(quill-better-table 基于quilljs 2.0版本实现,quilljs 2.0版目前并未发布稳定版)
npm install [email protected]
npm install quill-better-table
editor.vue
<template> <keep-alive> <div> <div class="editor"></div> </div> </keep-alive> </template> <script> import Quill from 'quill' import QuillBetterTable from 'quill-better-table' import 'quill-better-table/dist/quill-better-table.css' Quill.register( { 'modules/better-table': QuillBetterTable }, true ) 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': '删除列' } export default { name: 'Editor', props: { value: { type: String } }, data() { return { contentValue: this.value, quill: null, options: { theme: 'snow', modules: { toolbar: { container: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], // 引用 代码块 [{ header: 1 }, { header: 2 }], // 标题 —— 独立平铺 [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表 [{ script: 'sub' }, { script: 'super' }], // 下标/上标 [{ indent: '-1' }, { indent: '+1' }], // 缩进 [{ size: ['small', false, 'large', 'huge'] }], // 字体大小 [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题 —— 下拉选择 [{ color: [] }, { background: [] }], [{ font: [] }], // 字体 [{ align: [] }], ['clean'], // 清除文本格式 ['link', 'image', 'video'], [{ table: 'TD' }] ], handlers: { table: function(val) { this.quill.getModule('better-table').insertTable(3, 4) } } }, table: false, 'better-table': { operationMenu: { items: { insertColumnRight: { text: '右边插入一列' }, insertColumnLeft: { text: '左边插入一列' }, insertRowUp: { text: '上边插入一行' }, insertRowDown: { text: '下边插入一行' }, mergeCells: { text: '合并单元格' }, unmergeCells: { text: '拆分单元格' }, deleteColumn: { text: '删除列' }, deleteRow: { text: '删除行' }, deleteTable: { text: '删除表格' } }, color: { colors: ['green', 'red', 'yellow', 'blue', 'white'], text: '背景色:' } } }, keyboard: { bindings: QuillBetterTable.keyboardBindings } }, placeholder: '' }, currentPoint: '' } }, watch: { value(val) { this.contentValue = val this.quill.root.innerHTML = val } }, mounted() { const dom = this.$el.querySelector('.editor') this.quill = new Quill(dom, this.options) this.quill.root.innerHTML = this.contentValue this.quill.on('text-change', () => { this.$emit('contentData', this.quill.root.innerHTML) }) this.addQuillTitle() }, activated() { // this.quill.setContents({}) }, methods: { 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]] }) }, getContentData() { return this.quill.getContents() } } } </script>
引用文件(我是用在编辑界面,最后会出现一个问题,右键的时候看不到应该出现的按钮,原来是被el-dialog的遮住了,然后提高了按钮样式的层级)
import editor from '@/pages/decision/components/editor.vue' changeContent(data) { this.info = data },
......
<el-form-item label="内容"> <editor style="width: 90%;" v-model="info" @contentData="changeContent($event)" ></editor> </el-form-item>
......
css:
.ql-editor { min-height: 400px; height: auto !important; height: 400px; } .qlbt-operation-menu { z-index: 9999 !important; }
展示页面:
<div ref="fileCont" class="ql-container"> <div class="ql-editor" v-html="cont" style="margin-left:100px;margin-right:100px;" ></div> </div>
最后的效果:
查看效果:
参考文章:
https://blog.csdn.net/dangsh_/article/details/115115349
https://codepen.io/soccerloway/pen/WWJowj(quill-better-table在线demo)
https://blog.csdn.net/qq_30306717/article/details/127909758
标签:text,better,item,table,ql,quill From: https://www.cnblogs.com/utomboy/p/17839224.html