快捷導(dǎo)航

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)論吧

?。。?！注意：

在自定義上傳圖片的改造過(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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: