vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作
更新時(shí)間：2020年08月03日 10:21:46 作者：ethan-coding
這篇文章主要介紹了vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
背景：
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)論吧
！?。。∽⒁猓?/strong>
在自定義上傳圖片的改造過(guò)程中如果存在多個(gè)富文本框同時(shí)存在一個(gè)頁(yè)面時(shí)需要保證每個(gè)富文本及對(duì)應(yīng)的upload的ref不一樣
補(bǔ)充知識(shí)：在Vue項(xiàng)目使用quill-editor帶樣式編輯器（更改插入圖片和視頻） 運(yùn)用vue-quilt-editor編寫富文本編輯器 自定義圖片路徑 獲取后臺(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中使用vant的Toast輕提示報(bào)錯(cuò)的解決
這篇文章主要介紹了vue中使用vant的Toast輕提示報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能
這篇文章主要介紹了基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能,文中通過(guò)代碼示例給大家講解的非常纖細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
今天小編就為大家分享一篇vue表單中遍歷表單操作按鈕的顯示隱藏示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
在Vue.js中,您可以使用watch選項(xiàng)來(lái)創(chuàng)建偵聽(tīng)器,以偵聽(tīng)特定屬性的變化,偵聽(tīng)器可以在屬性發(fā)生變化時(shí)執(zhí)行相關(guān)的邏輯,本文給大家詳細(xì)講講Vue中watch偵聽(tīng)器的用法,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簽到日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue如何安裝使用Quill富文本編輯器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
利用Vue.js+Node.js+MongoDB實(shí)現(xiàn)一個(gè)博客系統(tǒng)（附源碼）
本文主要介紹了利用Vue.js+Node.js+MongoDB實(shí)現(xiàn)一個(gè)博客系統(tǒng)，這個(gè)博客使用Vue做前端框架，Node+express做后端，數(shù)據(jù)庫(kù)使用的是MongoDB。實(shí)現(xiàn)了用戶注冊(cè)、用戶登錄、博客管理、文章編輯、標(biāo)簽分類等功能，需要的朋友可以參考學(xué)習(xí)。2017-04-04
TypeScript 是一種由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言，它是 JavaScript 的一個(gè)超集，擴(kuò)展了 JavaScript 的語(yǔ)法。這篇文章主要介紹了Vue新搭檔TypeScript快速入門實(shí)踐,需要的朋友可以參考下2021-06-06
一步步從Vue3.x源碼上理解ref和reactive的區(qū)別
vue3的數(shù)據(jù)雙向綁定,大家都明白是proxy數(shù)據(jù)代理,但是在定義響應(yīng)式數(shù)據(jù)的時(shí)候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
最近學(xué)習(xí)了Vue3,利用vue3做了個(gè)好玩的項(xiàng)目,所以下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3模仿Windows窗口的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04