vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作
背景:
1.某些場(chǎng)景下vue-quill-editor默認(rèn)的工具欄部分功能不希望出現(xiàn),需要?jiǎng)h除部分功能。
2.vue-quill-editor默認(rèn)提供的圖片上傳方案是將圖片轉(zhuǎn)成base64存放到內(nèi)容區(qū),這會(huì)導(dǎo)致content字符長(zhǎng)度太長(zhǎng),不一定可以傳到后臺(tái)保存(其實(shí)即使可以保存也不推薦這種方案)。所以我們需要將方案修改為將圖片上傳到服務(wù)器,然后通過(guò)URL的 方式訪問(wèn)到圖片回顯及使用。
vue-quill-editor工具欄改造及自定義圖片上傳(這里使用的是element-ui的上傳組件):
引入插件(vue引入vue-quill-editor自行問(wèn)度娘)
vue html
<el-upload class="avatar-uploader quill-img" name="file" :action="uploadImgUrl" :show-file-list="false" :headers="uploadHeaders" :on-success="quillImgSuccess" :before-upload="quillImgBefore" accept='.jpg,.jpeg,.png,.gif'> </el-upload> <quill-editor ref="myTextEditor" v-model="yearReviewForm.workCompletion" :options="editorOption"> </quill-editor> vue js editorOption: { placeholder: 'Please enter it here...', modules:{ toolbar:{ container: [ ['bold', 'italic', 'underline', 'strike'],// 加粗,斜體,下劃線,刪除線 ['blockquote'],// 引用 [{ 'header': 1 }, { 'header': 2 }],// 標(biāo)題,鍵值對(duì)的形式;1、2表示字體大小 [{ 'list': 'ordered'}, { 'list': 'bullet' }],//列表 [{ 'indent': '-1'}, { 'indent': '+1' }],// 縮進(jìn) [{ 'direction': 'rtl' }],// 文本方向 [{ 'size': ['small', false, 'large', 'huge'] }],// 字體大小 [{ 'header': [1, 2, 3, 4, 5, 6, false] }],//幾級(jí)標(biāo)題 [{ 'color': [] }, { 'background': [] }],// 字體顏色,字體背景顏色 [{ 'font': [] }],//字體 [{ 'align': [] }],//對(duì)齊方式 ['clean'],//清除字體樣式 ['image']//上傳圖片、上傳視頻 ], handlers: { 'image': function(val){ if(val){ document.querySelector('.quill-img input').click() }else{ this.quill.format('image', false); } } } } } }
自定義上傳回顯
// 富文本編輯框圖片上傳 quillImgSuccess(res, file) { // 獲取富文本組件實(shí)例 let quill = this.$refs.myTextEditor.quill; // 如果上傳成功 if (res.code == '00001') { // 獲取光標(biāo)所在位置 let length = quill.getSelection().index; // 插入圖片 res.data為服務(wù)器返回的圖片地址 quill.insertEmbed(length, 'image', '/static-resource/' + res.body);// 這里的url是圖片的訪問(wèn)路徑不是真實(shí)物理路徑 // 調(diào)整光標(biāo)到最后 quill.setSelection(length + 1) } else { this.$message.error('圖片插入失敗') } }
校驗(yàn)圖片格式
quillImgBefore(file){ let fileType = file.type; if(fileType === 'image/jpeg' || fileType === 'image/png'){ return true; }else { this.$message.error('請(qǐng)插入圖片類型文件(jpg/jpeg/png)'); return false; } },
至此大功告成。這里面只記錄了關(guān)鍵步驟,不清楚的地方評(píng)論吧
?。。?!注意:
在自定義上傳圖片的改造過(guò)程中如果存在多個(gè)富文本框同時(shí)存在一個(gè)頁(yè)面時(shí)需要保證每個(gè)富文本及對(duì)應(yīng)的upload的ref不一樣
補(bǔ)充知識(shí):在Vue項(xiàng)目使用quill-editor帶樣式編輯器(更改插入圖片和視頻) 運(yùn)用vue-quilt-editor編寫(xiě)富文本編輯器 自定義圖片路徑 獲取后臺(tái)返回路徑
一、首先在main.js 引入 vue-quilt-editor
import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css'
引入vue-quilt-editor樣式 否則樣式會(huì)亂碼
二、導(dǎo)入依賴
npm install vue-quilt-editor save
三、使用組件
1.code
<el-col :span="24" class="warp-main" > <el-form-item > <div class="edit_container"> <quill-editor v-model="mate.mateFormerHeader.values[object['description'].name]" ref="myQuillEditor" class="editer" :headers="headers" :options="editorOption" @ready="onEditorReady($event)"> </quill-editor> <el-upload class="upload-demo" :action="qnLocation" :before-upload='beforeUploadDetial' :data="uploadData" :on-success='upScuccess' :headers="headers" ref="upload" > <el-button size="small" type="primary" id="imgInput" style="display:none">點(diǎn)擊上傳</el-button> </el-upload> </div> </el-form-item> </el-col>
綁定v-model 添加方法 這里使用隱形的上傳按鈕 來(lái)自定義自己的路徑 headers 綁定圖片上傳的token 否則會(huì)報(bào)401
headers: { 'Authorization': 'Bearer ' + JSON.parse(window.sessionStorage.getItem('token')), 'Accept': 'application/json', 'X-TenantId': JSON.parse(window.sessionStorage.getItem('user')).tenantId },
2.js
import { quillEditor } from 'vue-quill-editor' // 調(diào)用編輯器
在掛載時(shí)為圖片上傳按鈕綁定事件
mounted () { // 為圖片ICON綁定事件 getModule 為編輯器的內(nèi)部屬性 this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler) }, onEditorReady () { }, // 點(diǎn)擊圖片按鈕會(huì)立即調(diào)用隱形按鈕的上傳 imgHandler (state) { this.addRange = this.$refs.myQuillEditor.quill.getSelection() if (state) { const fileInput = document.getElementById('imgInput') fileInput.click() // 加一個(gè)觸發(fā)事件 } this.uploadType = 'image' }, beforeUploadDetial (file) { // 圖片上傳之前調(diào)取的函數(shù) console.log(file) return this.qnUpload(file) }, qnUpload (file) { this.fullscreenLoading = true const suffix = file.name.split('.') const ext = suffix.splice(suffix.length - 1, 1)[0] console.log(this.uploadType) if (this.uploadType === 'image') { // 如果是點(diǎn)擊插入圖片 this.uploadData = { key: `image/${suffix.join('.')}_${new Date().getTime()}.${ext}` } } }, upScuccess (e, file, fileList) { console.log(e) this.fullscreenLoading = false const vm = this let url = '' if (this.uploadType === 'image') { // 獲得文件上傳后的URL地址 url = 訪問(wèn)路徑 + e } if (url != null && url.length > 0) { // 將文件上傳后的URL地址插入到編輯器文本中 let value = url vm.addRange = vm.$refs.myQuillEditor.quill.getSelection() value = value.indexOf('http') !== -1 ? value : 'http:' + value vm.$refs.myQuillEditor.quill.insertEmbed(vm.addRange !== null ? vm.addRange.index : 0, vm.uploadType, value, 'image') // 調(diào)用編輯器的 insertEmbed 方法,插入U(xiǎn)RL } this.$refs['upload'].clearFiles() // 插入成功后清除input的內(nèi)容 },
以上這篇vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue?3.0使用element-plus按需導(dǎo)入方法以及報(bào)錯(cuò)解決
Vue3是不能直接使用Element-ui了,需要換成Element-plus,下面這篇文章主要給大家介紹了關(guān)于vue?3.0使用element-plus按需導(dǎo)入方法以及報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2024-02-02vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例
今天小編就為大家分享一篇element-ui 上傳圖片后清空?qǐng)D片顯示的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue 開(kāi)發(fā)必須知道的36個(gè)技巧(小結(jié))
這篇文章主要介紹了Vue 開(kāi)發(fā)必須知道的36個(gè)技巧(小結(jié)),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10vue請(qǐng)求后端數(shù)據(jù)和跨域問(wèn)題解決
這篇文章主要介紹了vue請(qǐng)求后端數(shù)據(jù)和跨域問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05關(guān)于頁(yè)面刷新vuex數(shù)據(jù)消失問(wèn)題解決方案
本篇文章主要介紹了關(guān)于頁(yè)面刷新vuex數(shù)據(jù)消失問(wèn)題解決方案 ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07