quill编辑器使用总结

一、vue-quill-editor 与 quill

        若使用版本1.0，这两个组件使用哪个都是一样的，无非代码有点偏差；若需要使用表格功能，必须使用 quill2.0 版本，因为 vue-quill-editor 不支持table功能。

二、webpack版本问题

        在使用 quill-image-resize-module 组件做图片缩放功能时，需要全局引入quill，及在 vue.config.js 文件中进行如下配置：

const webpack = require('webpack');
// configureWebpack下添加
plugins: [new webpack.ProvidePlugin({'window.Quill': 'quill/dist/quill.js','Quill': 'quill/dist/quill.js'})
]

但配置完发现项目还是报错，这里需要将 webpack5.0版本更换为 webpack4.0

三、图片文字复制粘贴功能

        配合 quill-image-extend-module 组件实现图片上传到服务器的功能，具体参考：https://www.kancloud.cn/liuwave/quill/1434141        

        编辑器内粘贴文字基本没啥问题，好多人都困在了粘贴图片需要上传至文件服务器的问题上，最简单的方法就是添加一个粘贴事件，示例如下：

<div class="editor" ref="editor" @paste="imgPasteHandler($event)"></div>

// 监听粘贴事件imgPasteHandler(e) {if (e.clipboardData && e.clipboardData.files && e.clipboardData.files.length) {e.preventDefault();[].forEach.call(e.clipboardData.files, file => {let fileName = file.name;let fileType = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);console.log('fileType',fileType);let formData = new FormData();formData.append("files", file);uploadPic(formData).then(resp => {if (resp.code === '200') {this.$message.success("图片上传成功");let index = this.quill.getSelection(true).index;this.quill.insertEmbed(index, 'image', process.env.VUE_APP_BASE_API + resp.data.url);this.quill.setSelection(index + 1);} else {this.$message.error(resp.msg);}});});}}

四、实现表格功能 

        quill2.0版本是支持 quill-better-table 的。table可以实现单元格的宽度缩放，合并，新增，删除，以及底色调整。

        详情请参考：https://www.cnblogs.com/utomboy/p/17839224.html

五、动态实现编辑器的可编辑与只读模式

        可以在quill组件中定义一个属性，然后监听这个属性进行实时的对编辑器的只读模式进行更改，参考如下：

props: {/* 是否只读 */isReadOnly: {type: Boolean,default: false}
},
watch: {isReadOnly: {handler(flag) {if (this.quill !== null) {this.quill.enable(!flag);}},immediate: true}}

六、给toobar增加title

        编辑器默认是没有title提示的，这对于使用者来说很不友好，可以对toobar的工具图标添加title中文提示，示例如下：

data() {return {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': '清除字体样式'}}
},
mounted() {this.addQuillTitle();
},
methods: {addQuillTitle() {const oToolBar = document.querySelector('.ql-toolbar');const aButton = oToolBar.querySelectorAll('button');const aSelect = oToolBar.querySelectorAll('select');const aSpan = oToolBar.querySelectorAll('span');aButton.forEach(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 if (item.className === 'ql-list') {item.value === 'ordered' ? item.title = '有序列表' : item.title = '无序列表';} else {item.title = this.titleConfig[item.classList[0]];}});aSelect.forEach(item => {if (!item.classList.contains('ql-color') && item.classList.contains('ql-background')) {item.parentNode.title = this.titleConfig[item.classList[0]];}});aSpan.forEach(item => {if (item.classList[0] === 'ql-size') {const children = item.querySelectorAll('span');children.forEach(child => {if (child.className === 'ql-picker-label') {child.title = '字体大小';} else {child.title = '';}});} else if (item.classList[0] === 'ql-header') {const children = item.querySelectorAll('span');children.forEach(child => {if (child.className === 'ql-picker-label') {child.title = '标题';} else {child.title = '';}});} else if (item.classList[0] === 'ql-color') {const children = item.querySelectorAll('span');children.forEach(child => {if (child.className === 'ql-picker-label') {child.title = '字体颜色';} else {child.title = '';}});} else if (item.classList[0] === 'ql-background') {const children = item.querySelectorAll('span');children.forEach(child => {if (child.className === 'ql-picker-label') {child.title = '背景颜色';} else {child.title = '';}});} else if (item.classList[0] === 'ql-align') {const children = item.querySelectorAll('span');children.forEach(child => {if (child.className === 'ql-picker-label') {child.title = '对齐方式';} else if(child.className === 'ql-picker-options') {const childes = child.querySelectorAll('span');childes.forEach(c => {if (c.getAttribute('data-value') === 'center') {c.title = '居中';} else if (c.getAttribute('data-value') === 'right') {c.title = '右对齐';} else if (c.getAttribute('data-value') === 'justify') {c.title = '两端对齐';} else {c.title = '左对齐';}});}});}});}
}