1.痛点:在使用富文本编辑器时,经常用到上传图片,可是编辑器默认是将图片转成basE64存储的,这会导致上传时间过长以及前端小程序获取富文本内容时因为文件base64太大显示不了
2.解决:所以使用富文本编辑器进行自定义上传,先将图片上传到后端服务器,然后获取服务器返给我们的图片URL,然后再将此URL插入到富文本中即可.
3.组件化:项目中经常使用,所以将此功能写成一个组件 Editor.vue以来复用
以下为Editor.vue组件全部代码:
template部分
|
1 2 3 4 5 6 7 |
<template> <div> <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><quill-editor class="editor" v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor> </div> </template> |
script部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<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> |
在父组件中直接使用
|
1 |
<editor v-if="isShow" :richcontent="ruleForm.content"></editor> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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自定义图片、文件上传
评论抢沙发