富文本编辑器文件上传

1.需要先将其安装到您的Vue项目中

install vue-quill-editor

2.安装完成后，在src下的component文件夹中创建quill.vue,简单点将下面的代码复制进去，封装好的组件，其中把服务器地址和headers两个位置替换，然后在uploadFile方法中把接口替换

<template>
  <div>
    <el-upload
      action=""
      :accept="accept"
      :http-request="uploadFile"
      :show-file-list="false"
      :headers="headers"
      style="display: none"
      ref="upload"
      v-if="this.type === 'url'"
    >
    </el-upload>
    <div class="editor" ref="editor" :style="styles"></div>
  </div>
</template>

<script>
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Audio from './audio.js'
Quill.register(Audio, true)

export default {
  name: 'Editor',
  props: {
    /* 编辑器的内容 */
    value: {
      type: String,
      default: ''
    },
    /* 高度 */
    height: {
      type: Number,
      default: null
    },
    /* 最小高度 */
    minHeight: {
      type: Number,
      default: null
    },
    /* 只读 */
    readOnly: {
      type: Boolean,
      default: false
    },
    // 图片与音频上传文件大小限制(MB)
    fileSize: {
      type: Number,
      default: 10
    },
    // 视频上传文件大小限制(MB)
    videoFileSize: {
      type: Number,
      default: 20
    },
    /* 类型（base64格式、url格式） */
    type: {
      type: String,
      default: 'url'
    }
  },
  data () {
    return {
      uploadUrl: process.env.VUE_APP_SERVER_PROXY + '/custom/file/multipartFileUpload', // 上传的图片服务器地址
      headers: {
        Authorization: localStorage.getItem('access_token')
      },
      Quill: null,
      currentValue: '',
      accept: '',
      uploadType: '',
      options: {
        theme: 'snow',
        // bounds: document.body,
        debug: 'warn',
        modules: {
          // 工具栏配置
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video', 'audio'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入内容',
        readOnly: this.readOnly
      }
    }
  },
  computed: {
    styles () {
      const style = {}
      if (this.minHeight) {
        style.minHeight = `${this.minHeight}px`
      }
      if (this.height) {
        style.height = `${this.height}px`
      }
      return style
    }
  },
  watch: {
    value: {
      handler (val) {
        if (val !== this.currentValue) {
          this.currentValue = val === null ? '' : val
          if (this.Quill) {
            this.Quill.pasteHTML(this.currentValue)
            // 此处在初始化异步获取数据时，设置光标到最后
            const length = this.Quill.getLength()
            this.Quill.setSelection(length)
          }
        }
      },
      immediate: true
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    this.Quill = null
  },
  methods: {
    init () {
      const editor = this.$refs.editor
      this.Quill = new Quill(editor, this.options)
      // 获取工具栏模块
      const toolbar = this.Quill.getModule('toolbar')

      // 如果设置了上传地址则自定义图片上传事件
      if (this.type === 'url') {
        toolbar.addHandler('image', (value) => {
          this.uploadType = 'image'
          if (value) {
            this.$refs.upload.$children[0].$refs.input.setAttribute('accept', 'image/*')
            this.$refs.upload.$children[0].$refs.input.click()
          } else {
            this.Quill.format('image', false)
          }
        })
      }

      // 重写video上传自定义处理程序
      toolbar.addHandler('video', (value) => {
        this.uploadType = 'video'
        if (value) {
          this.$refs.upload.$children[0].$refs.input.setAttribute('accept', 'video/*')
          this.$refs.upload.$children[0].$refs.input.click()
        }
      })

      // 重写音频上传自定义处理程序
      toolbar.addHandler('audio', (value) => {
        this.uploadType = 'audio'
        if (value) {
          this.$refs.upload.$children[0].$refs.input.setAttribute('accept', 'audio/*')
          this.$refs.upload.$children[0].$refs.input.click()
        }
      })

      // 粘贴初始内容，并设置光标到最后
      this.Quill.pasteHTML(this.currentValue)
      const length = this.Quill.getLength()
      this.Quill.setSelection(length)

      this.Quill.on('text-change', (delta, oldDelta, source) => {
        const html = this.$refs.editor.children[0].innerHTML
        const value = html === '<p><br></p>' ? '' : html
        const text = this.Quill.getText()
        const quill = this.Quill
        this.currentValue = html
        this.$emit('input', value)
        this.$emit('on-change', { html, text, quill })
      })
      this.Quill.on('text-change', (delta, oldDelta, source) => {
        this.$emit('on-text-change', delta, oldDelta, source)
      })
      this.Quill.on('selection-change', (range, oldRange, source) => {
        this.$emit('on-selection-change', range, oldRange, source)
      })
      this.Quill.on('editor-change', (eventName, ...args) => {
        this.$emit('on-editor-change', eventName, ...args)
      })
    },
    // 上传前校检格式和大小
    handleBeforeUpload (file) {
      // 校验格式
      if (!file.type.includes(this.uploadType)) {
        this.$message.error(`请上传${this.uploadType}文件`)
        return false
      }
      // 校检文件大小
      const fileSize = this.uploadType === 'video' ? this.videoFileSize : this.fileSize
      const isLt = file.size / 1024 / 1024 < fileSize
      if (!isLt) {
        this.$message.error(`上传文件大小不能超过 ${fileSize} MB!`)
        return false
      }
      return true
    },
    // 上传方法
    uploadFile (e) {
      const bool = this.handleBeforeUpload(e.file)
      if (bool) {
        this.$util.upload(e).then((res) => {
          // 获取富文本组件实例
          const quill = this.Quill
          // 获取光标所在位置
          const length = quill.getSelection().index
          // 插入图片  res.data.data为服务器返回的图片地址
          quill.insertEmbed(length, this.uploadType, res)
          // quill.insertEmbed(length, 'image', res.data.data)
          // 调整光标到最后
          quill.setSelection(length + 1)
        })
      }
    }
  }
}
</script>

<style>
.editor, .ql-toolbar {
  white-space: pre-wrap !important;
  line-height: normal !important;
}
.quill-img {
  display: none;
}

.ql-snow button.ql-audio {
  background-image: url("./audio.svg");
  background-repeat: no-repeat;
  background-position: center;
}

.ql-snow .ql-tooltip[data-mode="link"]::before {
  content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0;
  content: "保存";
  padding-right: 0;
}

.ql-snow .ql-tooltip[data-mode="video"]::before {
  content: "请输入视频地址:";
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
</style>

 3.还有两个文件和上面的文件平级就行,这是上传视屏用到的

第一个audio.js

import Quill from 'quill'

// 源码中是import直接倒入，这里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')

const ATTRIBUTES = ['height', 'width']

class audio extends BlockEmbed {
  static create (value) {
    const node = super.create(value)
    // 添加audio标签所需的属性
    node.setAttribute('controls', 'controls')
    node.setAttribute('type', 'audio/mp4')
    node.setAttribute('src', this.sanitize(value))
    return node
  }

  static formats (domNode) {
    return ATTRIBUTES.reduce((formats, attribute) => {
      if (domNode.hasAttribute(attribute)) {
        formats[attribute] = domNode.getAttribute(attribute)
      }
      return formats
    }, {})
  }

  static sanitize (url) {
    return Link.sanitize(url) // eslint-disable-line import/no-named-as-default-member
  }

  static value (domNode) {
    return domNode.getAttribute('src')
  }

  format (name, value) {
    if (ATTRIBUTES.indexOf(name) > -1) {
      if (value) {
        this.domNode.setAttribute(name, value)
      } else {
        this.domNode.removeAttribute(name)
      }
    } else {
      super.format(name, value)
    }
  }

  html () {
    const { audio } = this.value()
    return `<a href="${audio}">${audio}</a>`
  }
}
audio.blotName = 'audio' // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
audio.className = 'ql-audio'
audio.tagName = 'audio' // 用audio标签替换iframe

export default audio

 4.audio.svn

<svg t="1664559512511" class="icon" viewBox="0 0 1024 1024" version="1.1"
     xmlns="http://www.w3.org/2000/svg" p-id="3622" width="18" height="18">
    <path d="M512 128c-212.1 0-384 171.9-384 384v360c0 13.3 10.7 24 24 24h184c35.3 0 64-28.7 64-64V624c0-35.3-28.7-64-64-64H200v-48c0-172.3 139.7-312 312-312s312 139.7 312 312v48H688c-35.3 0-64 28.7-64 64v208c0 35.3 28.7 64 64 64h184c13.3 0 24-10.7 24-24V512c0-212.1-171.9-384-384-384z" p-id="3623"></path>
</svg>

5.在需要的组件中把第一个文件引入，使用，我的功能是点击详情弹出下面我封装的dialog，然后显示内容，div中的类名一定要加上，不然一些样式不生效，

// <template></template>里面
<editor v-model.trim="form.brief" :min-height="192"  ref="myQuillEditor"/>


 import detailDialog from '../../../components/detail-dialog/detail-dialog.vue'
import editor from '@/components/quilleEditor/quill-editor.vue'

components: { detailDialog, editor },


<detail-dialog v-if="dialogVisible" :dialogVisible.sync="dialogVisible" title="详情">
      <div class="clearfix mb-12"></div>
      <div class="ql-snow">
        <div class="ql-editor" v-html="html"></div>
      </div>
    </detail-dialog>




 // 详情
    followUpDetails (row) {
      this.dialogVisible = true
      // 根据id请求接口，然后给content赋值
      this.$http.get(serviceApi.findMemorandumDetails, { id: row.id }).then(res => {
        fetch(res.data.data.brief).then(res => res.blob()).then(res => {
          const blob = new Blob([res], { type: 'text/plain' })
          const reader = new FileReader()
          reader.readAsText(blob, 'utf8')
          reader.onload = () => {
            this.html = reader.result
            this.content = reader.result
          }
        })
      })
    },