? ?? ? vue-quill-editor是我們再使用vue框架的時候常用的一個富文本編輯器惹谐，在進行富文本編輯的時候，我們往往要插入一些圖片驼卖，vue-quill-editor默認(rèn)的處理方式是直接將圖片轉(zhuǎn)成base64編碼氨肌，這樣的結(jié)果使整個富文本的html片段十分冗余，通常來講酌畜，每個服務(wù)器端接收的post的數(shù)據(jù)大小都是有限制的怎囚，這樣的話有可能導(dǎo)致提交失敗，或者是用戶體驗很差桥胞，數(shù)據(jù)要傳遞很久才全部傳送到服務(wù)器恳守。
1.下載Vue-Quill-Editor
npm install vue-quill-editor --save
2.下載quill（Vue-Quill-Editor需要依賴）
npm install quill --save
3.使用
import { quillEditor } from "vue-quill-editor"; //調(diào)用編輯器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
????本次使用到了富文本的封裝和上傳圖片,因要求使用element-ui框架，我上傳圖片的時候選擇了element-ui的Upload上傳組件將圖片上傳到服務(wù)器贩虾。再將圖片鏈接插入到富文本中催烘，以達到最優(yōu)的體驗。
子組件中將改變的值缎罢，直接發(fā)送給父組件伊群，父組件來完成邏輯處理
<template>
<div>
<el-upload //直接隱藏掉就好了考杉，用功能不用樣式
v-show="false"
id="quill-upload"
action="/api/product/upload.do"
name="upload_file"
multiple
:limit="3"
list-type="picture"
:show-file-list="false"
:before-upload="beforeUpload"
:on-error="uploadError"
:on-success="handleExceed">
<el-button size="small" type="primary" ></el-button>
<div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
<el-row v-loading="uillUpdateImg">
<quillEditor
ref="myQuillEditor"
@change="onEditorChange($event)"
v-model="value"
:options="editorOption"/>
</el-row>
</div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
name: "richText",
components:{quillEditor},
props:['content'], //父組件傳過來的舰始，將傳過來的渲染到富文本編輯器
data(){
return{
uillUpdateImg:false, //根據(jù)圖片上傳狀態(tài)來確定是否顯示loading動畫
serverUrl:'', //上傳的圖片服務(wù)器地址
value:this.content, //富文本內(nèi)容
editorOption: { //符文本編輯器的配置
placeholder: '',
theme: 'snow',
modules: {
toolbar: {
container: [ // 工具欄配置, 默認(rèn)是全部
['bold'],
['italic'],
['underline'],
['strike'],
[{'list':'ordered'},{'list': 'bullet' }],
['blockquote'], ['code-block'],
['link'],
['image'],
[{'list': 'ordered'}, {'list': 'bullet'}],
],
handlers: {
'image': function (value) {
if (value) {
// 給個點擊觸發(fā)Element-ui崇棠，input框選擇圖片文件
document.querySelector('#quill-upload input').click()
} else {
this.quill.format('image', false);
}
}
}
}
}
}
}
},
methods:{
onEditorChange({ quill, html, text }) { //富文本編輯器內(nèi)容發(fā)生改變的時候
this.value = html
this.$emit('textChange',html) //將富文本編輯器輸入的文本發(fā)送給父組件，父組件涉及提交添加或者更改
},
beforeUpload(){ //上傳圖片之前開啟loading
this.uillUpdateImg = true
},
uploadError(){ //圖片上傳失敗,關(guān)閉loading
this.uillUpdateImg = false
this.$message.error('圖片插入失敗')
},
handleExceed(response, file, fileList){ //圖片添加成功
let quill = this.$refs.myQuillEditor.quill
console.log(response)
if (response.status === 0) {
let length = quill.getSelection().index;
// 插入圖片 response.data.url為服務(wù)器返回的圖片地址
quill.insertEmbed(length, 'image', response.data.url)
// 調(diào)整光標(biāo)到最后
quill.setSelection(length + 1)
}else{
this.$message.error('圖片插入失敗')
}
this.fileList = fileList
this.uillUpdateImg = false
},
}
}
</script>
<style scoped>
</style>
配置中的handlers是用來定義自定義程序的蔽午，然而我們配置完后會懵逼地發(fā)現(xiàn)易茬，整個富文本編輯器的工具欄的圖片上傳等按鈕都不見了 只保留了幾個基本的富文本功能酬蹋。
這個是因為添加自定義處理程序?qū)⒏采w默認(rèn)的工具欄和主題行為
因此我們要再自行配置下我們需要的工具欄及老，所有功能的配置如下，大家可以按需配置范抓，這里看起來一大堆骄恶，也不美觀，大家也可以配置一個單獨的config文件引入匕垫。
??????有一點注意的地方僧鲁，父組件中傳入子組件中的值，子組件里面發(fā)生改變以后再傳給父組件象泵。將變量時存放在props屬性中的寞秃，我們在調(diào)用變量的時候是跟data里面的變量一樣的，都是通過this.變量來調(diào)用偶惠，這個問題就是說父組件傳入子組件的變量是不能this.變量直接改變的春寿，要在data或者computed屬性里面重新定義一個變量，或者監(jiān)聽props接受變量的變化忽孽。改變data或者computed屬性里面的變量就不會報錯了绑改。
