1.痛點(diǎn):在使用富文本編輯器時(shí),經(jīng)常用到上傳圖片,可是編輯器默認(rèn)是將圖片轉(zhuǎn)成base64存儲(chǔ)的,這會(huì)導(dǎo)致上傳時(shí)間過長(zhǎng)以及前端小程序獲取富文本內(nèi)容時(shí)因?yàn)槲募ase64太大顯示不了
2.解決:所以使用富文本編輯器進(jìn)行自定義上傳,先將圖片上傳到后端服務(wù)器,然后獲取服務(wù)器返給我們的圖片URL,然后再將此URL插入到富文本中即可.
3.組件化:項(xiàng)目中經(jīng)常使用,所以將此功能寫成一個(gè)組件 Editor.vue以來復(fù)用
以下為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 級(jí)標(biāo)題
[{ list: "ordered" }, { list: "bullet" }], // 有序篓吁、無序列表
[{ script: "sub" }, { script: "super" }], // 上標(biāo)/下標(biāo)
[{ indent: "-1" }, { indent: "+1" }], // 縮進(jìn)
// [{'direction': 'rtl'}], // 文本方向
[{ size: ["small", false, "large", "huge"] }], // 字體大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 標(biāo)題
[{ color: [] }, { background: [] }], // 字體顏色镇草、字體背景顏色
[{ font: [] }], // 字體種類
[{ align: [] }], // 對(duì)齊方式
["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的單項(xiàng)數(shù)據(jù)流,子組件是不允許直接對(duì)父組件傳來的值進(jìn)行修改
quillUpdateImg: false, // 根據(jù)圖片上傳狀態(tài)來確定是否顯示loading動(dòng)畫球恤，剛開始是false,不顯示
editorOption: {
placeholder: "",
theme: "snow", // or 'bubble'
placeholder: "請(qǐng)?zhí)砑觾?nèi)容",
modules: {
toolbar: {
container: toolbarOptions,
handlers: {
image: function (value) {
if (value) {
// 觸發(fā)input框選擇圖片文件
document.querySelector(".cus-avatar-uploader input").click();
} else {
this.quill.format("image", false);
}
},
}
}
}
},
// el-upload配置
serverUrl: "**********/imgUpload", // 這里寫你要上傳的圖片服務(wù)器地址
// 有的圖片服務(wù)器要求請(qǐng)求頭需要有token
header: {
//Authorization: 'Bearer ' + store.getters.access_token
}
};
},
methods: {
onEditorBlur () {
//失去焦點(diǎn)事件
},
onEditorFocus () {
//獲得焦點(diǎn)事件
},
onEditorChange () {
//內(nèi)容改變事件
this.$emit("input", this.content); // 需在父組件中自定義方法@input 接收子組件向父組件傳的值
},
// 富文本圖片上傳前
beforeUpload () {
// 顯示loading動(dòng)畫
this.quillUpdateImg = true;
},
// 圖片上傳成功方法,res為圖片服務(wù)器返回的數(shù)據(jù) 注意數(shù)據(jù)返回結(jié)構(gòu)
uploadSuccess (res, file) { // res為圖片服務(wù)器返回的數(shù)據(jù) 注意數(shù)據(jù)返回結(jié)構(gòu)
// 獲取富文本組件實(shí)例
let quill = this.$refs.myQuillEditor.quill;
// 如果上傳成功
if (res.code == 0) {
// 獲取光標(biāo)所在位置
let length = quill.getSelection().index;
// 插入圖片 res.data為服務(wù)器返回的圖片地址
quill.insertEmbed(length, "image", res.data);
// 調(diào)整光標(biāo)到最后
quill.setSelection(length + 1);
} else {
this.$message.error("圖片插入失敗");
}
// loading動(dòng)畫消失
this.quillUpdateImg = false;
},
// 富文本圖片上傳失敗
uploadError () {
// loading動(dòng)畫消失
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:'', //頁面中數(shù)據(jù)
isShow: false //富文本是否顯示
},
components: { // 組件的引用
Editor
},
methods:{
//接收子組件傳遞過來的值
getChildValue(childValue) {
this.ruleForm.content = childValue
}
}
},
注意:data里面定義一個(gè)變量isShow,由于接口異步加載的問題誊垢，子組件拿不到父組件傳過來的數(shù)據(jù),所以加一個(gè)開關(guān)來判斷,初始化的時(shí)候給一個(gè)false，數(shù)據(jù)加載賦值的時(shí)候再給他賦值為true即可.
參考文章-富文本編輯vue-quill-editor自定義圖片戒财、文件上傳
