原本直接使用的quill-editor富文本，但是上传图片的base64编码长度太长了，需要转成服务器的url地址，并且一个页面需要使用多个富文本框
贴两个参考的文档
完整代码
1、安装依赖
npm install vue-quill-editor
npm install quill
npm install quill-image-drop-module
npm install quill-image-resize-module2、在main.js中引入
//富文本
//引入quill-editor编辑器
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);
//实现quill-editor编辑器拖拽上传图片
import * as Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop)
//实现quill-editor编辑器调整图片尺寸
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
3、封装组件editor.vue
完整代码
<template>
<div>
<input
type="file"
name="img"
accept="image/jpeg,image/jpg,image/png"
id="quillInput"
class="quill-img"
multiple="multiple"
hidden
@change="getImgUrl($event)"
/>
<quill-editor
class="editor"
:ref="toref"
v-model="content"
:options="editorOption"
@change="onEditorChange(toref)"
@blur="onEditorBlur($event, toref)"
@focus="onEditorFocus($event, toref)"
>
</quill-editor>
</div>
</template>
<script>
import { singleFile, multipleFiles } from "@/api/file";
import { mapGetters } from "vuex";
export default {
name: 'Editor',
props: {
/* 编辑器的内容 */
value: {
type: String
},
/* input 输入框 索引 */
quillIndex: {
type: Number,
default: 0
},
/* quill-editor 的ref值*/
toref: {
type: String,
default: "quillEditor"
},
toplaceholder: {
type: String,
default: "请输入..."
}
},
data() {
return {
content: this.value,
editorOption: {
modules: {
imageDrop: true,
imageResize: {
displayStyles: {
backgroundColor: "black",
border: "none",
color: "white"
},
// modules: ["Resize", "DisplaySize", "Toolbar"]
},
toolbar: {
container: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ header: 1 }, { header: 2 }], // 1、2 级标题
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ script: "sub" }, { script: "super" }], // 上标/下标
[{ indent: "-1" }, { indent: "+1" }], // 缩进
// [{'direction': 'rtl'}], // 文本方向
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ font: [] }], // 字体种类
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["image"], // 链接、图片、视频
],//工具菜单栏配置
handlers: {
'image': (value) => {
if (value) {
// upload点击上传事件
let index = this.quillIndex;
document.querySelectorAll(".quill-img")[index].click();
//document.queryselector("#quillInput").click();
}
}
},
}
},
placeholder: this.toplaceholder, //提示
readyOnly: false, //是否只读
theme: "snow", //主题 snow/bubble
syntax: true, //语法检测
},
}
},
computed: {
...mapGetters([
"HOST"
]),
},
watch: {
value() {
this.content = this.value;
},
},
methods: {
//聚焦事件 可删除
onEditorFocus(e, ref) {
console.log("foucus", e, ref)
this.currentQuill = e;
},
//失焦事件 可删除
onEditorBlur(e, ref) {
console.log("blur", ref)
},
onEditorChange(toref) {
//触发父组件 修改父组件的值
this.$emit("input", this.content, toref);
},
// 失效机理综述中图片上传
getImgUrl(e) {
e.stopPropagation();
if (e.target.files.length > 0) {
this.getMultipleUrl(e.target.files); //多文件上传
}
},
getMultipleUrl(file) {
// 多文件上传
var formData = new FormData();
file.forEach(element => {
formData.append("file", element);
});
multipleFiles(formData).then((res) => {
let quill = this.$refs[this.toref].quill;//解决上文的refs报错
if (res.data.code == 20000) {
let list = res.data.data;
list.forEach(element => {
let url = this.HOST + element.afterName; //拼接图片地址
// 获取光标所在位置
let length = quill.selection.savedRange.index;
// 插入图片 res.url为服务器返回的图片地址
quill.insertEmbed(length, "image", url);
// 调整光标到最后
quill.setSelection(length + 1);
});
} else {
this.$message.error("图片上传失败！")
}
}).finally(() => {
// 清空输入框的value,解决 input不能上传重复文件的问题
let index = this.quillIndex;
document.querySelectorAll(".quill-img")[index].value = null;
});
},
}
}
</script>
<style lang="scss" scoped>
/* 富文本编辑器 修改高度*/
.editor {
line-height: normal !important;
margin-bottom: 0;
}
.editor ::v-deep .ql-container {
min-height: 200px !important;
}
</style>
4、在父组件中引入
在父组件中使用多个富文本框
<editor
v-if="edit"
toref="qualityAppraisalPlan"
:quillIndex="0"
v-model="qualityList.qualityAppraisalPlan"
@input="changeEditor"
/>
<div
v-if="!edit"
class="ql-editor"
v-html="qualityList.qualityAppraisalPlan"
></div>
<p>一、鉴定对象</p>
<editor
v-if="edit"
toref="identificationObject"
:quillIndex="1"
v-model="qualityList.identificationObject"
toplaceholder="请输入鉴定对象。。。"
@input="changeEditor"
/>
<div
style="padding-left: 20px"
v-if="!edit"
class="ql-editor"
v-html="qualityList.identificationObject"
></div>
