vuequilleditor如何使用富文本添加上傳音頻功能-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)vue quill editor如何使用富文本添加上傳音頻功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元惠城做網(wǎng)站,已為上家服務(wù),為惠城各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

1. 前言

vue-quill-editor 是vue項目中常用的富文本插件，其功能能滿足大部分的項目需求。但是，最近項目中，需要在富文本中上傳音頻文件，但是vue-quill-editor這個富文本僅支持圖片，視頻上傳；所以這個功能需要自定義。

怎么實現(xiàn)這個功能？

• 寫一個只能上傳音頻的組件，并且隱藏

• 在富文本插件的toolbar定義一個按鈕，點擊時調(diào)用上傳組件

• 監(jiān)聽上傳成功的回調(diào)函數(shù)，在富文本輸入框中插入音頻標(biāo)簽

2. 功能實現(xiàn)

2.1 基于Element-ui實現(xiàn)上傳組件，并且隱藏（不能讓用戶點擊）

<!-- 
首先，必須隱藏這個元素：display:none；
v-loading.fullscreen.lock：設(shè)置上傳時顯示loading，值為true/false；
action：設(shè)置上傳的地址；
before-upload：上傳前的鉤子函數(shù)，驗證是否為音頻文件；
on-success：上傳成功的鉤子函數(shù)；
on-progress：上傳時的鉤子函數(shù)，設(shè)置顯示loading
 -->
<div >
  <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>

對應(yīng)的鉤子函數(shù)：

actionUrl：直接根據(jù)后臺接口賦值即可
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：上傳成功的回調(diào)，主要功能實現(xiàn)的地方，后面介紹

uploadIng：設(shè)置顯示loading

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

2.2 在富文本插件的toolbar定義一個按鈕，點擊時調(diào)用上傳組件

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

A. 修改 editorOption 配置，添加一個按鈕：

//富文本設(shè)置
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初始化圖標(biāo)的樣式
    voiceButton.classList.add('fa');
    voiceButton.classList.add('fa-volume-up');
    voiceButton.classList.add('fa-lg');

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

B. mounted中初始化顯示按鈕

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

添加完成后效果：

如果是在不同的文件，即配置文件和組件調(diào)用不在同一個文件，請參考：在quill-editor組件工具欄中添加自定義的方法，這篇文章在自定義按鈕部分寫的很清楚！

3. 監(jiān)聽上傳成功的回調(diào)函數(shù)，在富文本輸入框中插入音頻標(biāo)簽

這一步驟是整個功能的核心！?。?/p>

網(wǎng)上有很多顯示自定義功能顯示的文字，但主要都是以圖片為主。大多用的都是 quill 的 pasteHTML 方法，但我試了以后并不能實現(xiàn)。將<audio src="" controls="true" ></audio>這樣的字符串加入到富文本綁定的變量上面后，并不能顯示。最后，可以使用insertEmbed插入對象到富文本中，但是，這個方法好像也只能插入image，不能插入其他的標(biāo)簽。

解決方法：自定義FileBlot ==>> Quill調(diào)用自定義Blot （即自定義一個Quill能解析顯示的標(biāo)簽，并且添加的里面去）

quill-editor 組件調(diào)用

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

<!-- change是內(nèi)容改變后的回調(diào)函數(shù)，做頁面處理，這里不說，自行根據(jù)系統(tǒng)頁面處理 -->
<quill-editor ref="myTextEditor" v-model="editorTempValue" :options="editorOption" @change="onEditorChange($event)"> </quill-editor>

handleSuccess：上傳成功的回調(diào)，主要功能實現(xiàn)的地方

handleSuccess(res, file, fileList){
  this.fullscreenLoading = false;
  // 獲取富文本組件實例
  let quill = this.$refs.myTextEditor.quill
  if (res.code === 0) {   // 如果上傳成功
    let length = quill.getSelection().index; // 獲取光標(biāo)所在位置

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

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

    // insertEmbed(index: Number(插入的位置), type: String(標(biāo)簽類型), value: any(參數(shù)，將傳入到create的方法中去), source: String = 'api')
    quill.insertEmbed(length, 'audio', {url: res.data.url}, "api");
    quill.setSelection(length + 1); //光標(biāo)位置向后移動一位
  } else {    
    this.$message.error(res.msg);    // 上傳失敗，提示錯誤信息
  }
},

完成后效果：

感謝各位的閱讀！關(guān)于“vue quill editor如何使用富文本添加上傳音頻功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

文章標(biāo)題：vuequilleditor如何使用富文本添加上傳音頻功能-創(chuàng)新互聯(lián)
本文URL：http://muchs.cn/article4/cdcgoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、做網(wǎng)站、企業(yè)建站、ChatGPT、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)