vuequilleditor怎么使用富文本添加上傳音頻功能

  
  upload
  

對應(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)。將這樣的字符串加入到富文本綁定的變量上面后，并不能顯示。最后，可以使用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
},

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)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。