vue-quill-editor富文本编辑器上传音频

1.npm下载

npm install vue-quill-editor

2.main.js文件引入

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.use(VueQuillEditor, {
	placeholder: "请在此输入内容...",
	modules: {
		//formula: true,
		toolbar: {
			container: "#toolbar"
		}
	}
});
let EmbedBlot = VueQuillEditor.Quill.import('blots/block/embed');

class AudioBlot extends EmbedBlot {
	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;
	}
}
AudioBlot.blotName = 'audio';
AudioBlot.tagName = 'audio';
VueQuillEditor.Quill.register(AudioBlot);

3.页面中使用

   <div style="height:300px;margin-left:30px;">
      <quill-editor v-model="content" ref="editor">
        <div id="toolbar" slot="toolbar">
          <button class="ql-bold" title="加粗">Bold</button>
          <button class="ql-italic" title="斜体">Italic</button>
          <button class="ql-underline" title="下划线">underline</button>
          <button class="ql-strike" title="删除线">strike</button>
          <button class="ql-list" value="ordered" title="有序列表"></button>
          <button class="ql-list" value="bullet" title="无序列表"></button>
          <select class="ql-header" title="段落格式">
            <option selected>正文</option>
            <option value="1">标题</option>
          </select>
          <select class="ql-color" value="color" title="字体颜色"></select>
          <select class="ql-background" value="background" title="背景颜色"></select>
          <select class="ql-align" value="align" title="对齐"></select>
          <el-button icon="el-icon-upload" @click="upload" title="上传录音"></el-button>
        </div>
      </quill-editor>
      //上传文件
      <el-upload
        action="/api/edu/upload"
        :headers="{token:token}"
        :on-progress="uploadIng"
        :on-success="handleSuccess"
        :on-error="uploadError"
        :before-upload="beforeUpload"
        :show-file-list="false"
        style="display:none"
      >
        <el-button size="small" type="primary" id="upload"></el-button>
      </el-upload>
    </div>
    
    //upload方法点击触发<el-upload>
     upload: function () {
      document.getElementById("upload").click();
    },
    //上传成功后 插入音频
    handleSuccess: function (res) {
      let quill = this.$refs.editor.quill;
      if (res.code == 200) {
        let length = quill.selection.savedRange.index;
        quill.insertEmbed(length, "audio", { url: res.data.url });
        quill.setSelection(length + 1);
      } else this.$message.error("上传失败");
    },