一、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 = '左对齐';
}
});
}
});
}
});
}
}