quill上传本地视频（保姆级教学）

设置富文本参数

     // 富文本框参数设置
      editorOption: {
        modules: {
          ImageExtend: {
            loading: false,
            name: 'file',
            action: UPLOAD_URL + '?path=edit.image',//网络请求地址
            // response: ({ url }) => getImgPath(url),
                response: (res) => {//请求到的内容里面有url  localhost:80/edit/image/1660723565030Product后端返回的
                 const a = res.url.slice(13)//截取掉没有用的localhost:80
                 console.log(a)///edit/image/1660723565030Product***.jpg

                const b = a.slice(a.length - 3)//截取后三位看看是什么格式的
                console.log(b, a)
                if (b === 'mp4') {//如果是mp4视频格式
                  // 修改为视频
          var quilll = this.$refs.myQuillEditor.quill//quill自带的
                      var range = this.$refs.myQuillEditor.quill.getSelection()//quill自带的获取光标位置
                      console.log(range)//{index:'当前光标位置'，length:'0'}
                      //由于我这里不知道为啥一直获取到光标位置一直是0导致视频一直插入第一位置,所以在data定义了一个indexVideo =0
                     // let indexVideo = 0
                    //  if (range == null) {
                       // indexVideo = 0
                      //} else {
                        //indexVideo = range.index
                      //}this.indexVideo 的数据从聚焦事件中获取
                      //  onEditorFocus(quill) {
        //this.indexVideo = quill.selection.lastRange.index
        //console.log('editor focus!聚焦', quill.selection.lastRange)
        //console.log(this.$refs.myQuillEditor)
      },
      //但是后面经过测试可以发现如果一进入就开始操作插入图片视频步骤的话会报错TypeError: Cannot read properties of undefined (reading 'children')译为:
      // 无法读取undefined的属性(正在读取'children') 是因为加载时无法及时获取到quilll无法获取到所以下一步无法继续进行
      //可以将这一步放到mounted中也可以取巧通过    
      //  onEditorChange({ quill, html, text }) {
       // this.quilll = quill//通过赋值来获取不收影响
       // console.log('editor change!书写时触发', quill, html, text)
       // this.content = html
      },
                    quilll.insertEmbed(this.indexVideo, 'video', getImgPath(a))//修改标签quilll.insertEmbed（光标位置，标签名称，src路径）
                } else {
                  // 插入图片
                }
              this.imgURL.push(getImgPath(a))
                return getImgPath(a)
              },
            headers: (xhr) => {//设置请求头
              xhr.setRequestHeader('token', getToken())
              xhr.setRequestHeader('Auth', authConfig(UPLOAD_URL + '?path=edit.image', 'POST', getToken()))
            }
          },
          toolbar: {
            container,
            handlers: {
              image: function() {
                QuillWatch.emit(this.quill.id)
              }
              //      video: function(val) {//开启后点击上传视频将不在使用链接而是和图片一样直接调用本地文件
              //   // 劫持原来的视频点击按钮事件
              //   QuillWatch.emit(this.quill.id)
              // }

            }
          }
        },
        placeholder: '请输入详情内容...'
      },

引入

import Video from './video'
Quill.register(Video, true)
import { quillEditor, Quill } from 'vue-quill-editor'

video.js文件内容

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

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

class Video extends BlockEmbed {
  static create(value) {
    const node = super.create(value)
    // 添加video标签所需的属性
    node.setAttribute('controls', 'controls')
    node.setAttribute('type', 'video/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 { video } = this.value()
    return `<a href="${video}">${video}</a>`
  }
}
Video.blotName = 'video' // 不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
Video.className = 'ql-video'
Video.tagName = 'video' // 用video标签替换iframe
export default Video