vue-quill-editor --save 实现自定义图片/视频上传

踩在这个作者的肩膀上实现了自定义图片/视频上传 https://sanshui.blog.csdn.net/article/details/81464100，原文章有些地方有点没说清楚的地方，稍作了些修改。也解决了文中未提及的bug。
复制以下代码即可使用

一，安装 vue-quill-editor

npm install vue-quill-editor --save 

二，
创建QuillEditor组件

创建上传的图片和视频的组件，基于element ui和oss，可根据自己的需求修改
./upload/index.vue

修改Quill内置的video blot，用video标签替换iframe
./upload/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 `${video}`;
  }
}
Video.blotName = "video"; // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
Video.className = "ql-video";
Video.tagName = "video"; // 用video标签替换iframe

export default Video;

如果报错说没有下面这些依赖，请依次安装

npm install quill-image-extend-module --save-dev
npm install quill-image-drop-module --save-dev 
npm install quill-image-resize-module --save-dev

如果在引进quill-image-resize-module 报错TypeError: Cannot read property 'imports' of undefined，
在vue.config.js中：（没有就在在根目录下新建vue.config.js 文件 （不是在src 下））(配置后需要重新运行一下)

var webpack = require('webpack');
module.exports = {
  // 在vue.config.js中configureWebpack中配置
// 要引入webpack

configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      }),
    ]
  }
}

最后在页面中使用：

         

import QuillEditor from '@/components/QuillEditor'
//多余代码就不写了
  components: {
  QuillEditor
  },
data(){
return {
content :""
}
}
methods:{
    // 获取html
    changeContent (val) {
      this.content = val
      console.log(val);
    },
}

清空编辑区内容使用：

this.$refs.quill.$refs.myTextEditor.quill.setText('\n')