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?3.0使用element-plus按需導入方法以及報錯解決
Vue3是不能直接使用Element-ui了,需要換成Element-plus,下面這篇文章主要給大家介紹了關于vue?3.0使用element-plus按需導入方法以及報錯解決的相關資料,需要的朋友可以參考下2024-02-02