vue-quill-editor是個(gè)較為輕量級(jí)富文本框，相較于ueditor，開(kāi)發(fā)更編輯，更加直觀，如果大家伙在需求允許的情況下，還是會(huì)比較建議使用vue-quill-editor。
vue-quill-editor的使用方法在這邊就不多說(shuō)了，大家網(wǎng)上查下，一抓一大把
但是在使用vue-quill-editor有一個(gè)致命的問(wèn)題，vue-quill-editor默認(rèn)插入圖片是直接將圖片轉(zhuǎn)為base64再放入內(nèi)容中，如果圖片比較大的話，富文本的內(nèi)容就會(huì)很大，即使圖片不大，只要圖片較為多，篇幅較長(zhǎng)，富文本的內(nèi)容也是異常的大的，這就會(huì)給大家?guī)?lái)一些煩惱，我們可能更希望在提交富文本的內(nèi)容的時(shí)候圖片只是以圖片地址提交，那這樣一來(lái)我們要怎么去處理呢，接下來(lái)大家可以來(lái)理一理
還是老思路，既然我們可以希望不是直接將圖片轉(zhuǎn)成base64，那么我們可以采用選擇完圖片，即將圖片上傳服務(wù)器，服務(wù)器返回相應(yīng)的圖片鏈接，前端將圖片鏈接插入到富文本的指定光標(biāo)上即可，這樣一來(lái)就可以實(shí)現(xiàn)我們的想要的效果了
首先，新建富文本組件QuillEditor.vue，利用iview的上傳組件來(lái)上傳選擇完的圖片（當(dāng)然，其他的上傳組件也是ok的）
<Upload id="iviewUp" ref="upload" :show-upload-list="false" :on-success="handleSingleSuccess" :format="['jpg','jpeg','png']" :max-size="2048" :headers="header" :on-format-error="handleFormatError" :before-upload="handleBeforeUpload()" type="drag" :action="serverUrl" style="display: none;width:0"> <div style="width: 0"> <Icon type="ios-camera" size="50"></Icon> </div> </Upload> <!--<Row>--> <quill-editor v-model="detailContent" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)"> </quill-editor> <!--</Row>-->
看到上面的代碼有的的就會(huì)有疑問(wèn)了，那上傳好的圖片要怎么插到富文本的指定光標(biāo)里面呢，別慌，面包會(huì)有的，往下看，
handleSingleSuccess (res, file) { // res為圖片服務(wù)器返回的數(shù)據(jù) // 獲取富文本組件實(shí)例 let vm = this let quill = this.$refs.myQuillEditor.quill console.log('res---', vm.$refs.myQuillEditor.quill.getSelection()) // 如果上傳成功 if (res.res_code === '1') { // 獲取光標(biāo)所在位置 let length = quill.getSelection().index; // 插入圖片 res.info為服務(wù)器返回的圖片地址 quill.insertEmbed(length, 'image', res.result.url) // 調(diào)整光標(biāo)到最后 quill.setSelection(length + 1) } else { vm.$Message.error('圖片插入失敗') } // loading動(dòng)畫(huà)消失 this.quillUpdateImg = false }通過(guò) this.$refs.myQuillEditor.quill.getSelection().index獲取光標(biāo)所在位置，將圖片地址放在該位置即可
這樣一來(lái)萬(wàn)事俱備，只欠東風(fēng)了，這個(gè)時(shí)候大家會(huì)發(fā)現(xiàn)，那iview這個(gè)上傳組件在頁(yè)面上呢，我怎么實(shí)現(xiàn)點(diǎn)擊富文本上的上傳圖片的按鈕調(diào)用iview的上傳組件的方法呢，
這個(gè)時(shí)候我們就要用到富文本中的配置屬性editorOption，對(duì)editorOption進(jìn)行圖片上傳的點(diǎn)擊事件進(jìn)行相應(yīng)的配置即可，詳情看下面代碼
editorOption: { // 富文本框配置 placeholder: '', theme: 'snow', // or 'bubble' modules: { toolbar: { container: toolbarOptions, // 工具欄 handlers: { 'image': function (value) { if (value) { document.querySelector('#iviewUp input').click() } else { this.quill.format('image', false); } } } } } } document.querySelector('#iviewUp input') 這個(gè)就是相應(yīng)的dom節(jié)點(diǎn)的點(diǎn)擊事件，將其綁在富文本的圖片按鈕點(diǎn)擊事件上好了，基本上大功告成。還是算比較簡(jiǎn)單的，希望可以供大家參考
總結(jié)
以上所述是小編給大家介紹的解決vue-quill-editor上傳內(nèi)容由于圖片是base64的導(dǎo)致字符太長(zhǎng)的問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
