vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作
更新時間：2020年08月03日 10:21:46 作者：ethan-coding
這篇文章主要介紹了vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
背景：
1.某些場景下vue-quill-editor默認的工具欄部分功能不希望出現(xiàn)，需要刪除部分功能。
2.vue-quill-editor默認提供的圖片上傳方案是將圖片轉成base64存放到內容區(qū)，這會導致content字符長度太長，不一定可以傳到后臺保存（其實即使可以保存也不推薦這種方案）。所以我們需要將方案修改為將圖片上傳到服務器，然后通過URL的 方式訪問到圖片回顯及使用。
vue-quill-editor工具欄改造及自定義圖片上傳（這里使用的是element-ui的上傳組件）：
引入插件（vue引入vue-quill-editor自行問度娘）
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 }],// 標題，鍵值對的形式；1、2表示字體大小
[{ 'list': 'ordered'}, { 'list': 'bullet' }],//列表
[{ 'indent': '-1'}, { 'indent': '+1' }],// 縮進
[{ 'direction': 'rtl' }],// 文本方向
[{ 'size': ['small', false, 'large', 'huge'] }],// 字體大小
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],//幾級標題
[{ 'color': [] }, { 'background': [] }],// 字體顏色，字體背景顏色
[{ 'font': [] }],//字體
[{ 'align': [] }],//對齊方式
['clean'],//清除字體樣式
['image']//上傳圖片、上傳視頻
],
handlers: {
'image': function(val){
if(val){
document.querySelector('.quill-img input').click()
}else{
this.quill.format('image', false);
}
}
}
}
}
}
自定義上傳回顯
// 富文本編輯框圖片上傳
quillImgSuccess(res, file) {
// 獲取富文本組件實例
let quill = this.$refs.myTextEditor.quill;
// 如果上傳成功
if (res.code == '00001') {
// 獲取光標所在位置
let length = quill.getSelection().index;
// 插入圖片 res.data為服務器返回的圖片地址
quill.insertEmbed(length, 'image', '/static-resource/' + res.body);// 這里的url是圖片的訪問路徑不是真實物理路徑
// 調整光標到最后
quill.setSelection(length + 1)
} else {
this.$message.error('圖片插入失敗')
}
}
校驗圖片格式
quillImgBefore(file){
let fileType = file.type;
if(fileType === 'image/jpeg' || fileType === 'image/png'){
return true;
}else {
this.$message.error('請插入圖片類型文件(jpg/jpeg/png)');
return false;
}
},
至此大功告成。這里面只記錄了關鍵步驟，不清楚的地方評論吧
！?。。∽⒁猓?/strong>
在自定義上傳圖片的改造過程中如果存在多個富文本框同時存在一個頁面時需要保證每個富文本及對應的upload的ref不一樣
補充知識：在Vue項目使用quill-editor帶樣式編輯器（更改插入圖片和視頻） 運用vue-quilt-editor編寫富文本編輯器 自定義圖片路徑 獲取后臺返回路徑
一、首先在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樣式 否則樣式會亂碼
二、導入依賴
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">點擊上傳</el-button> </el-upload> </div> </el-form-item> </el-col>
綁定v-model 添加方法 這里使用隱形的上傳按鈕 來自定義自己的路徑 headers 綁定圖片上傳的token 否則會報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' // 調用編輯器
在掛載時為圖片上傳按鈕綁定事件
mounted () {
// 為圖片ICON綁定事件 getModule 為編輯器的內部屬性
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgHandler)
},
onEditorReady () {
},
// 點擊圖片按鈕會立即調用隱形按鈕的上傳
imgHandler (state) {
this.addRange = this.$refs.myQuillEditor.quill.getSelection()
if (state) {
const fileInput = document.getElementById('imgInput')
fileInput.click() // 加一個觸發(fā)事件
}
this.uploadType = 'image'
},
beforeUploadDetial (file) {
// 圖片上傳之前調取的函數(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') { // 如果是點擊插入圖片
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 = 訪問路徑 + 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') // 調用編輯器的 insertEmbed 方法，插入URL
}
this.$refs['upload'].clearFiles() // 插入成功后清除input的內容
},
以上這篇vue-quill-editor 自定義工具欄和自定義圖片上傳路徑操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue CLI3 如何支持less的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue?3.0使用element-plus按需導入方法以及報錯解決
Vue3是不能直接使用Element-ui了,需要換成Element-plus,下面這篇文章主要給大家介紹了關于vue?3.0使用element-plus按需導入方法以及報錯解決的相關資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue中對時間戳的處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細介紹了vue+moment實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
今天小編就為大家分享一篇element-ui 上傳圖片后清空圖片顯示的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue中使用Echarts的兩種方式,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了Vue 開發(fā)必須知道的36個技巧(小結),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了vue請求后端數(shù)據(jù)和跨域問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
本文主要介紹了Vue實現(xiàn)登錄功能全套詳解（含封裝axios），文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
本篇文章主要介紹了關于頁面刷新vuex數(shù)據(jù)消失問題解決方案 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07