1.痛点:在使用富文本编辑器时,经常用到上传图片,可是编辑器默认是将图片转成base64存储的,这会导致上传时间过长以及前端小程序获取富文本内容时因为文件base64太大显示不了
2.解决:所以使用富文本编辑器进行自定义上传,先将图片上传到后端服务器,然后获取服务器返给我们的图片URL,然后再将此URL插入到富文本中即可.
3.组件化:项目中经常使用,所以将此功能写成一个组件 Editor.vue以来复用
以下为Editor.vue组件全部代码:
template部分
<template>
<div>
<!-- element图片上传组件-->
<el-upload class="avatar-uploader cus-avatar-uploader" :action="serverUrl" :headers="header" :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload">
</el-upload>
<!-- vue-quill-editor-->
<quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
</quill-editor>
</div>
</template>
script部分
<script>
const toolbarOptions = [ // 工具栏配置
["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"], // 清除文本格式
["link", "image", "video"] // 链接、图片、视频
];
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import store from '@/store'
export default {
props: {
richContent: { //接收父组件传递过来的值
type: String
}
},
components: { //组件
quillEditor
},
data () {
return {
content: this.richContent, //基于vue的单项数据流,子组件是不允许直接对父组件传来的值进行修改
quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
editorOption: {
placeholder: "",
theme: "snow", // or 'bubble'
placeholder: "请添加内容",
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
image: function (value) {
if (value) {
// 触发input框选择图片文件
document.querySelector(".cus-avatar-uploader input").click();
} else {
this.quill.format("image", false);
}
},
}
}
}
},
// el-upload配置
serverUrl: "**********/imgUpload", // 这里写你要上传的图片服务器地址
// 有的图片服务器要求请求头需要有token
header: {
//Authorization: 'Bearer ' + store.getters.access_token
}
};
},
methods: {
onEditorBlur () {
//失去焦点事件
},
onEditorFocus () {
//获得焦点事件
},
onEditorChange () {
//内容改变事件
this.$emit("input", this.content); // 需在父组件中自定义方法@input 接收子组件向父组件传的值
},
// 富文本图片上传前
beforeUpload () {
// 显示loading动画
this.quillUpdateImg = true;
},
// 图片上传成功方法,res为图片服务器返回的数据 注意数据返回结构
uploadSuccess (res, file) { // res为图片服务器返回的数据 注意数据返回结构
// 获取富文本组件实例
let quill = this.$refs.myQuillEditor.quill;
// 如果上传成功
if (res.code == 0) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.data为服务器返回的图片地址
quill.insertEmbed(length, "image", res.data);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error("图片插入失败");
}
// loading动画消失
this.quillUpdateImg = false;
},
// 富文本图片上传失败
uploadError () {
// loading动画消失
this.quillUpdateImg = false;
this.$message.error("图片上传失败");
}
}
};
</script>
在父组件中直接使用
<Editor v-if="isShow" :richContent='ruleForm.content' @input='getChildValue' />
import Editor from '../../components/Editor' //引用富文本Editor组件
export default {
name: 'addNewsList',
data() {
return {
ruleForm:'', //页面中数据
isShow: false //富文本是否显示
},
components: { // 组件的引用
Editor
},
methods:{
//接收子组件传递过来的值
getChildValue(childValue) {
this.ruleForm.content = childValue
}
}
},
注意:data里面定义一个变量isShow,由于接口异步加载的问题，子组件拿不到父组件传过来的数据,所以加一个开关来判断,初始化的时候给一个false，数据加载赋值的时候再给他赋值为true即可.
参考文章-富文本编辑vue-quill-editor自定义图片、文件上传
