quill 上传图片和视频 定制

pass，待写
网上都是 vue 实现的
感觉有点麻烦
这里通过最简单的 jquery 直接调用 quill 的api 来实现

使用到的 api :
详细用法，参见我的另一篇 ：
quill 的使用方法 包含大部分接口

insertEmbed 向编辑器中插入嵌入式内容，返回一个改变后的Delta对象
index 是当前编辑的焦点位置，type 是 image video 或者其他

insertEmbed(index: Number, type: String, value: any, 
source: String = 'api'): Delta

获取插入的位置

const range = quill.getSelection();

插入图片地址

quill.insertEmbed(10, 'image', 'https://quilljs.com/images/cloud.png')

需要一个隐藏的 上传input 按钮

<input id="uploadImg" type="file" style="display:none" 
accept="image/png, image/jpeg, image/gif" @change="uploadImage">

可以添加自定义的 函数使用：

quill.getModule("toolbar").addHandler("toolbar xx" , 
handeler)

触发图片的toolbar

quill.getModule("toolbar").addHandler("image", 
uploadImageHandler)

触发input 选择图片

uploadImageHandler () {
  const input = document.querySelector('#uploadImg')
  input.value = ''
  input.click()
},

选择图片触发input change 事件,通过里面的ajax 获取 图片 url

async uploadImage (event) {
    const form = new FormData()
    form.append('upload_file', event.target.files[0])

    const url = await $.ajax(...)  #上传图片 获取地址

    const addImageRange = this.quill.getSelection()
    const newRange = 0 + (addImageRange !== null ? addImageRange.index : 0)
    this.quill.insertEmbed(newRange, 'image', url)
    this.quill.setSelection(1 + newRange)
  }

粘贴图片：
参考 quill issue
https://github.com/quilljs/quill/blob/develop/modules/clipboard.js#L153

https://github.com/quilljs/quill/issues/137

差不多可以实现的方法：（调用 web 的js 内置方法，读取文件，作为图片对象，然后调用自己的图片函数）

var IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;
var loadImage = function (file) {
    var reader = new FileReader();
    reader.onload = function(e){
        var img = document.createElement('img');
        img.src = e.target.result;
        var range = window.getSelection().getRangeAt(0);
        range.deleteContents();
        range.insertNode(img);
    };
    reader.readAsDataURL(file);
};

document.onpaste = function(e){
    var items = e.clipboardData.items;

    for (var i = 0; i < items.length; i++) {
        if (IMAGE_MIME_REGEX.test(items[i].type)) {
            loadImage(items[i].getAsFile());
            return;
        }
    }

    // Normal paste handling here
}

记得一点：一个是绑定 onpaste 事件，第二个是 clipboardData 对象的使用 e.clipboardData.items[index].getAsFile() 即为拿到file 对象

参考 ：
js 文件对象
https://developer.mozilla.org/zh-CN/docs/Web/API/File
js input file
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file
js 粘贴对象
https://developer.mozilla.org/zh-CN/docs/Web/API/ClipboardEvent/clipboardData

上传音频参考：
https://luncher.github.io/2018/06/02/Quill%E7%BC%96%E8%BE%91%E5%99%A8%E6%B7%BB%E5%8A%A0%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%92%E4%BB%B6/