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
