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
