vue quill使用&quill 自定义图片上传&自定义mp4 更换标签

pluins 创建quill 目录

创建文件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

　　模版中引用注册

//import { quillEditor } from "vue-quill-editor";
//import { ImgHandlers, ToolbarOptions } from "../../api/upload";
// //这里引入修改过的video模块并注册
// import Video from '../../plugins/quill/video'
// Quill.register(Video, true)
// import Audio from '../../plugins/quill/audio'
// Quill.register(Audio, true)

　　api/upload 配置

　　

import {
	baseUrl
} from './env'

// 工具栏配置
const ToolbarOptions = [
    ["bold", "italic", "underline", "strike"], // toggled buttons
    ["blockquote", "code-block"],

    // [{ header: 1 }, { header: 2 }], // custom button values
    [{ list: "ordered" }, { list: "bullet" }],
    // [{ script: "sub" }, { script: "super" }], // superscript/subscript
    [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
    [{ direction: "rtl" }], // text direction

    [{ size: ["small", false, "large", "huge"] }], // custom dropdown
    [{ header: [1, 2, 3, 4, 5, 6, false] }],

    [{ color: [] }, { background: [] }], // dropdown with defaults from theme
    [{ font: [] }],
    [{ align: [] }],
    ["link", "image","audio", "video"],
    // ["clean"] // remove formatting button
];

// 图片上传参数配置
const uploadConfig = {
    action: baseUrl + "/common/uploadImg", // 必填参数 图片上传地址
    methods: "POST", // 必填参数 图片上传方式
    //token: "229d6e933a679f40030d03f1e5c4a4ff", // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
    name: "file_name", // 必填参数 文件的参数名
    size: 500, // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
    accept: "image/png, image/gif, image/jpeg, image/bmp, image/x-icon" // 可选 可上传的图片格式
  };
// handler重写事件, 任何工具按钮的功能都可以重写，这里只重写图片上传事件
const ImgHandlers = {
    image: function image() {
      var self = this;
  
      var fileInput = this.container.querySelector("input.ql-image[type=file]");
      if (fileInput === null) {
        fileInput = document.createElement("input");
        fileInput.setAttribute("type", "file");
        // 设置图片参数名
        if (uploadConfig.name) {
          fileInput.setAttribute("name", uploadConfig.name);
        }
        // 可设置上传图片的格式
        fileInput.setAttribute("accept", uploadConfig.accept);
        fileInput.classList.add("ql-image");
        // 监听选择文件
        fileInput.addEventListener("change", function() {
          // 如果图片限制大小
          if (
            uploadConfig.size &&
            fileInput.files[0].size >= uploadConfig.size * 1024
          ) {
            fileInput.value = "";
            return;
          }
          // 创建formData
          var formData = new FormData();
          formData.append(uploadConfig.name, fileInput.files[0]);
          // 如果需要token且存在token
          if (uploadConfig.token) {
            formData.append("token", uploadConfig.token);
          }
          // 图片上传
          var xhr = new XMLHttpRequest();
          xhr.open(uploadConfig.methods, uploadConfig.action, true);
          // 上传数据成功，会触发
          xhr.onload = function(e) {
            if (xhr.status === 200) {
              var res = JSON.parse(xhr.responseText);
              //console.log(res)
              let length = self.quill.getSelection(true).index;
              self.quill.insertEmbed(length, "image", res.data.url);
              self.quill.setSelection(length + 1);
            }
            fileInput.value = "";
          };
          // 开始上传数据
          xhr.upload.onloadstart = function(e) {
            fileInput.value = "";
            // console.log('开始上传')
          };
          // 当发生网络异常的时候会触发，如果上传数据的过程还未结束
          xhr.upload.onerror = function(e) {};
          // 上传数据完成（成功或者失败）时会触发
          xhr.upload.onloadend = function(e) {
            // console.log('上传结束')
          };
          xhr.send(formData);
        });
        this.container.appendChild(fileInput);
      }
      fileInput.click();
    }
  };
  export  {uploadConfig,ImgHandlers,ToolbarOptions}

　　

模版初始化

export default:
components:{quillEditor}
// computed: {
  //   editor() {
  //     return this.$refs.myQuillEditor.quill;
  //   },
  //   editor2() {
  //     return this.$refs.myQuillEditor2.quill;
  //   },
  // },

data return 
// editorOption: {
      //   placeholder: "请输入文本信息...",
      //   modules: {
      //     toolbar: {
      //       container: ToolbarOptions, // 工具栏
      //       handlers: ImgHandlers
      //     }
      //   }
      // },

methods:
// //初始化编辑器
    // onEditorReady(editor) {
    //   //console.log(editor);
    // },
    // onEditorReady2(editor2) {},

template：

<div class="edit_container">
                    <quill-editor
                      v-model="questionForm.questionOptions"
                      ref="myQuillEditor2"
                      class="editer"
                      :options="editorOption"
                      @ready="onEditorReady2($event)"
                    ></quill-editor> 
                  </div>

　webpack.base.conf.js

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ELEMENT',
    // 'vue-quill-editor': 'VueQuillEditor',
    'echarts': 'echarts',
  },

　　index.html

<!-- Include the Quill library -->
  <!-- <script src="//cdn.bootcss.com/quill/1.3.4/quill.js"></script> -->
  <!-- <script src="//cdn.jsdelivr.net/npm/vue"></script> -->
  <!-- Quill JS Vue -->
  <!-- <script src="//cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
  <script src="//cdn.jsdelivr.net/npm/quill-image-resize-module"></script> -->


  <!-- Include stylesheet -->
  <!-- <link href="//cdn.bootcss.com/quill/1.3.4/quill.core.css" rel="stylesheet">
  <link href="//cdn.bootcss.com/quill/1.3.4/quill.snow.css" rel="stylesheet">
  <link href="//cdn.bootcss.com/quill/1.3.4/quill.bubble.css" rel="stylesheet"> -->