思路：在富文本配置中劫持图片点击事件，该事件中点击elementUI中的上传组件upload（<el-upload>)，唤起本地上传服务器操作，将upload组件在文本流中暗藏，upload组件上传的服务器改为七牛云，返回的值中的key和hash进行拼接成七牛云线上图片地址回显赋值至富文本组件中。实现图片上传及回显性能。
1、封装富文本组件
quill.vue
（1）template
<template><!-- 这是一个富文本的组件--><div class="editor_wrap"> <el-upload class="avatar-uploader" action="http://upload-z2.qiniup.com" // 上传的服务器地址（服务器所在的区域不同会有变动） :accept="'image/*'" // 接管的图片类型 :data="qiniuForm" // 追加的数据 :show-file-list="false" // 是否显示已上传文件列表 :on-success="uploadEditorSuccess" :on-error="uploadEditorError" :before-upload="beforeEditorUpload"> </el-upload> <el-row v-loading="quillUpdateImg"> //v-loading是上传动画 <quill-editor :options="editorOption" //绑定富文本编辑配置项 class="editor" v-model="content" ref="QuillEditor" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)" @ready="onEditorReady($event)"> </quill-editor> </el-row></div></template>（2）script
<script>import { quillEditor } from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike'] ['blockquote', 'code-block'], // 援用 代码块-----['blockquote', 'code-block'] [{ header: 1 }, { header: 2 }], // 1、2 级题目-----[{ header: 1 }, { header: 2 }] [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }] [{ script: 'sub' }, { script: 'super' }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }] [{ indent: '-1' }, { indent: '+1' }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }] [{ direction: 'rtl' }], // 文本方向-----[{'direction': 'rtl'}] [{ size: ['small', false, 'large', 'huge'] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }] [{ header: [1, 2, 3, 4, 5, 6, false] }], // 题目-----[{ header: [1, 2, 3, 4, 5, 6, false] }] [{ color: [] }, { background: [] }], // 字体色彩、字体背景色彩-----[{ color: [] }, { background: [] }] [{ font: [] }], // 字体品种-----[{ font: [] }] [{ align: [] }], // 对齐形式-----[{ align: [] }] ['clean'], // 革除文本格式-----['clean'] ['image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']]export default { name: 'UE', token: '', components: { quillEditor }, props: ['fMessage'], //接管父组件参数 data: function () { return { num: 0, quillUpdateImg: false, content: ``, // 富文本编辑器默认内容 editorOption: { // 富文本编辑器配置 modules: { // 工具栏定义的 toolbar: { container: toolbarOptions, // 工具栏 handlers: { 'image': function (value) { if (value) { document.querySelector('.editor_wrap .avatar-uploader input').click() } else { this.quill.format('image', false) } } } } }, // 主题 theme: 'snow', placeholder: '请输出内容' }, qiniuForm: { 'key': new Date().getTime() + '' + Math.floor(Math.random() * 1000), // 上传七牛云的key值避免反复 'token': sessionStorage.token, // 后端生成的token 'domain': 'http://qvti2smmh.hn-bkt.clouddn.com' // 你的七牛云域名 } }},methods: { // 上传图片之前 beforeEditorUpload (res, file) { // 显示上传动画 this.quillUpdateImg = true }, // 上传图片胜利 uploadEditorSuccess (res, file) { // 拼接出上传的图片在服务器的残缺地址 let imgUrl = this.qiniuForm.domain + '/' + res.key // 重置上传文件key，为下次上传做好筹备，若下面的没用能够在函数中重置 this.qiniuForm.key = new Date().getTime() + '' + Math.floor(Math.random() * 1000) // 获取富文本组件实例 let quill = this.$refs.QuillEditor.quill // 获取光标所在位置 let length = quill.getSelection().index // 插入图片 res.info为服务器返回的图片地址 quill.insertEmbed(length, 'image', imgUrl) // 调整光标到最初 quill.setSelection(length + 1) // 勾销上传动画 this.quillUpdateImg = false }, // 上传图片失败 uploadEditorError (res, file) { // 页面提醒 // Notification.error({ // message: '上传图片失败' // }) console.log('失败！') // 勾销上传动画 this.quillUpdateImg = false }, onEditorChange ({editor, html, text}) { this.content = html this.$emit('contentmsg', html) //将子组件的内容传给父组件 }, onEditorFocus () { }, onEditorReady () { }, onEditorBlur () { } }, computed: { editor () { return this.$refs.QuillEditor.quill } }, mounted: function () { setTimeout(() => { this.content = this.fMessage }, 1100) // 将父组件传过来的内容赋值给子组件，挂载时数据未传过来所以用setTimeout延时执行赋值操作 // this.content = this.fMessage }}</script>（3）style
.quill-editor { height: 300px;}.editor { line-height: normal !important; height: 500px;}.ql-snow .ql-tooltip[data-mode="link"]::before { content: "请输出链接地址:";}.ql-snow .ql-tooltip.ql-editing a.ql-action::after { border-right: 0px; content: "保留"; padding-right: 0px;}.ql-snow .ql-tooltip[data-mode="video"]::before { content: "请输出视频地址:";}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "14px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { content: "10px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { content: "18px";}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { content: "32px";}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before { content: "文本";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: "题目1";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: "题目2";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: "题目3";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: "题目4";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before { content: "题目5";}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before { content: "题目6";}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before { content: "规范字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before { content: "衬线字体";}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before { content: "等宽字体";}2、父组件中援用
（1）temple
// fMessage和contentmsg是为相似批改性能中要将本来的内容放进去，就要从父组件中传进去<squill-editor-qiniu :fMessage="ccontent" v-model="content" @contentmsg='getContent'></squill-editor-qiniu>（2）script
// 申明子组件components: { SquillEditorQiniu // 富文本框上传组件}// 办法methods中，获取子组件数据getContent (contentmsg) { this.content = contentmsg}3、node获取token
router.get('/token', (req, res, next) => { const accessKey = 'ZfDWvo39oY-r6Exgz6NZTNlhbTJSuErVlUDuQaPe' //这里填写七牛云的accessKey const secretKey = 'RLUv6WzrZkxc_7PtAIhfXoqn7dxAroNEqvCo2BCH' //这里填写七牛云的secretKey var mac = new qiniu.auth.digest.Mac(accessKey, secretKey) var options = { scope: 'blogostest', //这里填写七牛云空间名称 expires: 7200 //七牛云的无效时长 } var putPolicy = new qiniu.rs.PutPolicy(options); var uploadToken = putPolicy.uploadToken(mac); let _res = res; // 该接口返回的数据 let _data = { code: 200, msg: uploadToken } setTimeout(() => { //把操作后果返回给前台页面 resJson(_res, _data) }, 500);})