使用vue-quill-editor富文本自定义图片音频上传 ---基于ivew组件库

基于vue-quill-editor富文本编辑器的自定义上传图片及音频
1.下载依赖：cnpm i vue-quill-editor;
2.main.js注册、

import VueQuillEditor from 'vue-quill-editor'
//引入css
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

3.组件内扩展audio标签指路bm.lee
将文件中video改为audio即可

 import * as Quill from 'quill'
  import Audio from '../../quill/audio'
  Quill.register(Audio, true)

HTML：

<template>
  <div class="myQuillEditor">
    <!-- 图片音频上传 -->
    <div class="upLoadIconWarp">
      <Upload :action="serverUrl" :headers='header' :on-success="uploadSuccess">
        <Icon type="ios-image-outline" @click="upLoadSelf('img')" />
      </Upload>
      <Upload :action="serverUrl" :headers='header' :on-success="uploadSuccess">
        <Icon type="md-arrow-dropright-circle" @click="upLoadSelf('audio')" />
      </Upload>
    </div>
    <quill-editor v-model="content" ref='myQuillEditor' :options="editorOption" @blur="onEditorBlur"
      @focus="onEditorFocus" @change="onEditorChange">
    </quill-editor>
  </div>
</template>
<script>
  import * as Quill from 'quill'
  import Audio from '../../quill/audio'
  Quill.register(Audio , true)
  export default {
    data() {
      return {
        serverUrl:'http://baidu.cn',//上传后端接口
        uploadType: '',
        content: '',
        editorOption: {
          placeholder: '请输入...', //富文本框placeholder
          // modules: {
          //   toolbar: {
          //     container: toolbarOptions, // 自定义工具栏
          //   }
          // }
        },
      }
    },
    methods: {
      upLoadSelf(type) {
        this.uploadType = type
      },
      //上传成功插入富文本中
      uploadSuccess(res) {
        let type = this.uploadType;
        let quill = this.$refs.myQuillEditor.quill; //获取
        let length = quill.selection.savedRange.index; //获取焦点下标
        if (res.ret == 'SUCCESS') {
          if (type == 'img') {
            quill.pasteHTML(length, `<img src="${res.data}"/>`) //向富文本插入img标签
          } else if (type == 'audio') {
            quill.pasteHTML(length, `<audio src="${res.data}"></audio>`)//向富文本插入audio标签
          }
          this.$forceUpdate()
        }

      },
      onEditorBlur() {

      },
      onEditorFocus() {

      },
      onEditorChange() {

      }
    },
  }
</script>
<style lang="less">
  //修改富文本框placeholder 默认样式
  /deep/.ql-blank:before {
    font-size: 12px;
    font-style: normal !important;
    color: #c0c0c0 !important;
  }
</style>

以上