vue-quill-editor富文本编辑框使用
vue富文本中实现上传图片及修改图片大小等功能。
1，配置使用
配置使用网上很多，记录下自己的使用过程
第一步：components/Editor文件夹下创建QuillEditor.vue文件
第二步：代码中加入QuillEditor的引入
import quillEditor from "@/components/Editor/QuillEditor";
export default {
name: "Biz_ztxx_text_manager",
components: { quillEditor },
...... 
第三步：vue.config.js中加入webpack
在文件顶部加入：
const webpack = require('webpack')在文件底部加入：
config.plugin('provide').use(webpack.ProvidePlugin, [{
// 'window.Quill': 'quill'
'window.Quill': 'quill'
}])
第四步：代码中引用
第五步：命令行中执行安装
npm install vue-quill-editor
npm install quill-image-resize-module --save
npm install quill-image-drop-module --save
npm install quill-image-extend-module --save若安装失败，执行npm install 或者npm install --registry=https://registry.npmmirror.com
大部分情况都能成功。之后执行启动即可，可以在富文本中进行上传图片及修改图片大小等功能。
2，富文本框无法调整默认高度
参考：vue 的Quill Editor如何设置默认高度？_quill-editor 高度_Rocket MAN的博客-CSDN博客
添加此样式
3，设置富文本框只读
vue-quill-editor设置readonly等不起作用
使用此命令设置只读，其他的设置disabled等的均不好使
let that = this
this.$nextTick(()=>{
that.$refs.quillEditor.Quill.enable(false);
})4，出现报错等，参考Vue Element UI 之富文本插件实现图片调整大小（quill-image-resize-module）、图片粘贴（quill-image-drop-module） - 灰信网（软件开发博客聚合）
5，设置复制黏贴自动上传
参考：Vue Element UI 之富文本插件实现图片调整大小（quill-image-resize-module）、图片粘贴（quill-image-drop-module） - 灰信网（软件开发博客聚合）
进行部分调整
QuillEditor.vue中添加监听
@paste.native="handlePaste($event)"安装及引入jquery
npm install jquery --save
import $ from 'jquery';增加handlePaste方法
handlePaste(evt) {
let that = this
if (evt.clipboardData &&
evt.clipboardData.files &&
evt.clipboardData.files.length) {
evt.preventDefault();
[].forEach.call(evt.clipboardData.files, (file) => {
if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
return;
}
const formData = new FormData();
formData.append("file", file);//后台上传接口的参数名
// 实现上传
$.ajax({
type: "post",
url: process.env.VUE_APP_BASE_API +'/common/imortImg', // 上传的图片服务器地址
data: formData,
headers:{'Authorization': "Bearer " + getToken()},//必须
dataType: "json",
processData: false,
contentType: false,//设置文件上传的type值，必须
success: (response) => {
if (response.code == 200) {
//当编辑器中没有输入文本时，这里获取到的 range 为 null
debugger
var range = that.$refs.myQuillEditor.quill.selection.savedRange;
//图片插入在富文本中的位置
var index = 0;
if (range == null) {
index = 0;
} else {
index = range.index;
}
//将图片链接插入到当前的富文本当中
that.$refs.myQuillEditor.quill.insertEmbed(index, "image", response.data.imgUrl);
// 调整光标到最后
that.$refs.myQuillEditor.quillsetSelection(index + 1); //光标后移一位
}
},
error: function () {
this.$message.error('上传失败！')
},
});
});
}
},