1.概述
實(shí)現(xiàn)前提:
- 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還有七牛云整合的思路
實(shí)現(xiàn)思路：
根據(jù)大神的文章，大概思路如下：
- 1.先用
el-upload組件實(shí)現(xiàn)和七牛云的上傳坚嗜。 - 2.隱藏掉
el-upload組件践宴。 - 3.處理點(diǎn)擊富文本框的圖片的按鈕的時(shí)候哨查，調(diào)用
el-upload的上傳。 - 4.上傳成功后弦疮，拼接好圖片的地址夹攒，按照光標(biāo)的為止插入到富文本中
目標(biāo):將上面的部分封裝成組件，提供給每個(gè)頁(yè)面方面的使用
1.實(shí)現(xiàn)代碼
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:'請(qǐng)?zhí)顚戃囕v詳情信息',
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){
//顯示上傳動(dòng)畫
this.quillUpdateImg = true;
},
// 上傳圖片成功
uploadEditorSuccess(res, file) {
//拼接出上傳的圖片在服務(wù)器的完整地址
let imgUrl = this.qiniuForm.domain+ res.key;
//重置上傳文件key胁塞，為下次上傳做好準(zhǔn)備
this.qiniuForm.key = new Date().getTime()+""+Math.floor(Math.random()*1000);
// 獲取富文本組件實(shí)例
let quill = this.$refs.customQuillEditor.quill;
// 獲取光標(biāo)所在位置
let length = quill.getSelection().index;
// 插入圖片 res.info為服務(wù)器返回的圖片地址
quill.insertEmbed(length, 'image', imgUrl)
// 調(diào)整光標(biāo)到最后
quill.setSelection(length + 1)
//取消上傳動(dòng)畫
this.quillUpdateImg = false;
},
// 上傳圖片失敗
uploadEditorError(res, file) {
//頁(yè)面提示
Notification.error({
message: '上傳圖片失敗'
});
//取消上傳動(dòng)畫
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 注冊(cè)成組件
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:需要從后臺(tái)獲取咏尝，后臺(tái)和七牛云請(qǐng)求得到
- v-model: 你最后得到的文本的屬性
- domain: 七牛云的域，可以從七牛云獲取到
- uploadUrl: 上傳地址闲先，也是從七牛云獲取
1.2 實(shí)現(xiàn)效果
實(shí)現(xiàn)效果
我們可以看到最終上傳一個(gè)圖片状土，里面html代碼里的圖片地址是我們七牛云上的地址
