1. 前言

vue-quill-editor 是vue專案中常用的富文字外掛，其功能能滿足大部分的專案需求。但是，最近專案中，需要在富文字中上傳音訊檔案，但是vue-quill-editor這個富文字僅支援圖片，視訊上傳；所以這個功能需要自定義。

怎麼實現這個功能？

• 寫一個只能上傳音訊的元件，並且隱藏
• 在富文字外掛的toolbar定義一個按鈕，點選時呼叫上傳元件
• 監聽上傳成功的回撥函式，在富文字輸入框中插入音訊標籤

2. 功能實現

2.1 基於Element-ui實現上傳元件，並且隱藏（不能讓使用者點選）

<!-- 
首先，必須隱藏這個元素：display:none；
v-loading.fullscreen.lock：設定上傳時顯示loading，值為true/false；
action：設定上傳的地址；
before-upload：上傳前的鉤子函式，驗證是否為音訊檔案；
on-success：上傳成功的鉤子函式；
on-progress：上傳時的鉤子函式，設定顯示loading
 -->
<div style="display:none">
  <el-upload
    v-loading.fullscreen.lock="fullscreenLoading"
    :action="actionUrl"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-progress="uploadIng"
  >
  <el-button size="small" class="uploadVoiceBtn" type="primary">upload</el-button>
  </el-upload>
</div>

對應的鉤子函式：

actionUrl：直接根據後臺介面賦值即可
beforeUpload：驗證是否為音訊

beforeUpload(file){
  // file.type好像只能返回圖片的格式，其他的將會是 ""， 所以需要自己獲取字尾名判斷檔案格式
  let pointIndex = file.name.lastIndexOf(".");
  let fileType = file.name.substring(pointIndex+1);  //獲取到檔案字尾名
  // if (fileType !== 'mp3' && fileType !== 'ogg' && fileType !== 'wav') {
  if (fileType !== 'mp3' && fileType !== 'ogg') {
    this.$message.error('你選擇的檔案不是音訊哦，僅支援mp3和ogg格式')
    return false
  }
},

handleSuccess：上傳成功的回撥，主要功能實現的地方，後面介紹

uploadIng：設定顯示loading

uploadIng(){    //上傳時顯示loading
  this.fullscreenLoading = true
}

2.2 在富文字外掛的toolbar定義一個按鈕，點選時呼叫上傳元件

注意：vue-quill-editor是基於quill富文字的二次封裝（原始碼可以很容易看出來），所以需要看配置方法的直接去看quill即可

A. 修改 editorOption 配置，新增一個按鈕：

//富文字設定
editorOption: {
  modules: {
    ...,//其他配置，如quill-image-extend-module
    toolbar: {
      container: [
        ['bold','italic','underline','strike'],[{ 'size': ['small',false,'large','huge'] }],[{ 'header': [1,2,3,4,5,6,false] }],[{ 'color': [] },{ 'background': [] }],['blockquote','code-block'],['link','image'],['voice']   //新新增的工具
      ],handlers: {
        'voice': function(value){   //新增工具方法，即點選時模仿點選上傳元件的按鈕
         document.querySelector('.uploadVoiceBtn').click()
        }
      }
    }
  },initVoiceButton:function(){   //初始化"voice"按鈕樣式
    const voiceButton = document.querySelector('.ql-voice'); //"ql-" 是外掛自動加的字首
    
    // 新增樣式，使用fontawesome初始化圖示的樣式
    voiceButton.classList.add('fa');
    voiceButton.classList.add('fa-volume-up');
    voiceButton.classList.add('fa-lg');

    // 當然，可以直接手寫樣式，如：
    // voiceButton.style.cssText = "width:80px; border:1px solid #ccc; border-radius:5px;";
    // voiceButton.innerText="上傳音訊";
  }
},

B. mounted中初始化顯示按鈕

mounted(){
  this.editorOption.initVoiceButton();   //初始化音訊圖示，這樣才能顯示
},

新增完成後效果：

如果是在不同的檔案，即配置檔案和元件呼叫不在同一個檔案，請參考：在quill-editor元件工具欄中新增自定義的方法，這篇文章在自定義按鈕部分寫的很清楚！

3. 監聽上傳成功的回撥函式，在富文字輸入框中插入音訊標籤

這一步驟是整個功能的核心！！！

網上有很多顯示自定義功能顯示的文字，但主要都是以圖片為主。大多用的都是 quill 的 pasteHTML 方法，但我試了以後並不能實現。將<audio src="" controls="true" ></audio>這樣的字串加入到富文字繫結的變數上面後，並不能顯示。最後，可以使用insertEmbed插入物件到富文字中，但是，這個方法好像也只能插入image，不能插入其他的標籤。

解決方法：自定義FileBlot ==>> Quill呼叫自定義Blot （即自定義一個Quill能解析顯示的標籤，並且新增的裡面去）

quill-editor 元件呼叫

import { quillEditor,Quill } from 'vue-quill-editor'
components: {
  quillEditor
},

<!-- change是內容改變後的回撥函式，做頁面處理，這裡不說，自行根據系統頁面處理 -->
<quill-editor ref="myTextEditor" v-model="editorTempValue" :options="editorOption" @change="onEditorChange($event)"> </quill-editor>

handleSuccess：上傳成功的回撥，主要功能實現的地方

handleSuccess(res,file,fileList){
  this.fullscreenLoading = false;
  // 獲取富文字元件例項
  let quill = this.$refs.myTextEditor.quill
  if (res.code === 0) {   // 如果上傳成功
    let length = quill.getSelection().index; // 獲取游標所在位置

    let BlockEmbed = Quill.import('blots/block/embed');
    class AudioBlot extends BlockEmbed {
      static create(value) {
        let node = super.create();
        node.setAttribute('src',value.url);   //設定audio的src屬性
        node.setAttribute('controls',true);   //設定audio的controls，否則他將不會顯示
        node.setAttribute('controlsList','nodownload');   //設定audio的下載功能為不能下載
        node.setAttribute('id','voice');     //設定一個id
        return node;
      }

      // static value(node) {
      //  return {
      //   url: node.getAttribute('src')
      //  };
      // }
    }
    AudioBlot.blotName = 'audio';
    AudioBlot.tagName = 'audio';   //自定義的標籤為audio
    Quill.register(AudioBlot);

    // insertEmbed(index: Number(插入的位置),type: String(標籤型別),value: any(引數，將傳入到create的方法中去),source: String = 'api')
    quill.insertEmbed(length,'audio',{url: res.data.url},"api");
    quill.setSelection(length + 1); //游標位置向後移動一位
  } else {    
    this.$message.error(res.msg);    // 上傳失敗，提示錯誤資訊
  }
},

完成後效果：

總結

以上所述是小編給大家介紹的vue-quill-editor 富文字新增上傳音訊功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對我們網站的支援！
如果你覺得本文對你有幫助，歡迎轉載，煩請註明出處，謝謝！