1.概述
实现前提:
- Element UI:上传使用的是Element 的
el-upload组件,可以参考http://element.eleme.io/#/zh-CN/component/upload - quill-editor:富文本处理，可以参考文档https://surmon-china.github.io/vue-quill-editor/
- 参考文章大神的文章https://github.com/NextBoy/skill/issues/2，这里主要讲解的是如何使用Element和quill-editor还有七牛云整合的思路
实现思路：
根据大神的文章，大概思路如下：
- 1.先用
el-upload组件实现和七牛云的上传。 - 2.隐藏掉
el-upload组件。 - 3.处理点击富文本框的图片的按钮的时候，调用
el-upload的上传。 - 4.上传成功后，拼接好图片的地址，按照光标的为止插入到富文本中
目标:将上面的部分封装成组件，提供给每个页面方面的使用
1.实现代码
1.1 组件定义
<!--
基于quill-editor的整合七牛云上传的自定义组件
elemntUI文档地址 http://element.eleme.io/#/zh-CN/component/tag
quill-editor 文档地址 https://surmon-china.github.io/vue-quill-editor/
quill-editor整合七牛云上传https://github.com/NextBoy/skill/issues/2
-->
<template>
<div id='quillEditorQiniu'>
<!-- 基于elementUi的上传组件 el-upload begin-->
<el-upload
class="avatar-uploader"
:action="uploadUrl"
:accept="'image/*'"
:data="qiniuForm"
:show-file-list="false"
:on-success="uploadEditorSuccess"
:on-error="uploadEditorError"
:before-upload="beforeEditorUpload">
</el-upload>
<!-- 基于elementUi的上传组件 el-upload end-->
<quill-editor class="editor" v-model="content" ref="customQuillEditor" :options="editorOption" >
</quill-editor>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
//自定义编辑器的工作条
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{'header': 1}, {'header': 2}], // custom button values
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'script': 'sub'}, {'script': 'super'}], // superscript/subscript
[{'indent': '-1'}, {'indent': '+1'}], // outdent/indent
[{'direction': 'rtl'}], // text direction
[{'size': ['small', false, 'large', 'huge']}], // custom dropdown
[{'header': [1, 2, 3, 4, 5, 6, false]}],
[{'color': []}, {'background': []}], // dropdown with defaults from theme
[{'font': []}],
[{'align': []}],
['link', 'image', 'video'],
['clean'] // remove formatting button
];
export default {
data(){
return {
quillUpdateImg:false,
content:'',
editorOption:{
placeholder:'请填写车辆详情信息',
modules: {
toolbar: {
container: toolbarOptions, // 工具栏
handlers: {
'image': function (value) {
if (value) {
document.querySelector('#quillEditorQiniu .avatar-uploader input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
},
qiniuForm:{
'key': '',
'token': '',
'domain':''
},
}
},
props:{
token:String, //七牛云上传的token,类型为String
domain:String, //七牛云上传的域地址,类型为String
uploadUrl:String //从七牛云上拿到自己的上传地址,类型为String
},
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.customQuillEditor.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: '上传图片失败'
});
//取消上传动画
this.quillUpdateImg = false;
},
},
mounted () {
this.qiniuForm.key = new Date().getTime()+""+Math.floor(Math.random()*1000);
this.qiniuForm.token = this.token;
this.qiniuForm.domain = this.domain;
},
watch:{
content(newVal, oldVal) {
this.$emit('input', newVal);
}
}
}
</script>
<style scoped>
.editor{
min-height: 200px;
margin-bottom: 60px;
}
</style>
1.2 组件的使用
1.2.1 引入组件
import SquillEditorQiniu from '@/components/quill-editor-qiniu.vue';
1.2.2 注册成组件
components:{
SquillEditorQiniu //富文本框上传组件
}
1.2.3 放入组件
<squill-editor-qiniu :token='qiniuForm.token' v-model="addForm.details" :domain='qiniuForm.domain' uploadUrl='http://upload.qiniup.com/'></squill-editor-qiniu>
- token:需要从后台获取，后台和七牛云请求得到
- v-model: 你最后得到的文本的属性
- domain: 七牛云的域，可以从七牛云获取到
- uploadUrl: 上传地址，也是从七牛云获取
1.2 实现效果
实现效果
我们可以看到最终上传一个图片，里面html代码里的图片地址是我们七牛云上的地址
