forked from NextBoy/quill-image-extend-module
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ImageExtend.js
217 lines (206 loc) · 7.47 KB
/
ImageExtend.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
/**
* @description 图片功能拓展: 增加上传 拖动 复制
*/
export class ImageExtend {
/**
* @param quill {Quill}富文本实例
* @param config {Object} options
* config keys: action, headers, editForm start end error size response
*/
constructor(quill, config = {}) {
this.id = Math.random()
this.quill = quill
this.quill.id = this.id
this.config = config
this.file = '' // 要上传的图片
this.imgURL = '' // 图片地址
let quillLoading
if (this.config.loading) {
quillLoading = document.querySelector('.quillLoading')
if (quillLoading === null) {
quillLoading = document.createElement('div')
quillLoading.classList.add('quill-loading')
quillLoading.classList.add('extend-upload-success')
document.querySelector('.ql-container').appendChild(quillLoading)
}
}
this.quillLoading = quillLoading
quill.root.addEventListener('paste', this.pasteHandle.bind(this), false)
quill.root.addEventListener('drop', this.dropHandle.bind(this), false)
quill.root.addEventListener('dropover', function (e) {
e.preventDefault()
}, false)
QuillWatch.on(this.id, this)
}
/**
* @description 粘贴
* @param e
*/
pasteHandle(e) {
let clipboardData = e.clipboardData
let i = 0
let items, item, types
if (clipboardData) {
items = clipboardData.items;
if (!items) {
return;
}
item = items[0];
types = clipboardData.types || [];
for (; i < types.length; i++) {
if (types[i] === 'Files') {
item = items[i];
break;
}
}
if (item && item.kind === 'file' && item.type.match(/^image\//i)) {
this.file = item.getAsFile()
let self = this
// 如果图片限制大小
if (self.config.size && self.file.size >= self.config.size * 1024 * 1024 && self.config.loading) {
self.quillLoading.classList.remove('extend-upload-success')
self.quillLoading.classList.add('extend-upload-warning-color')
self.quillLoading.innerHTML = '图片大小超过限制'
setTimeout(function () {
self.quillLoading.classList.remove('extend-upload-warning-color')
self.quillLoading.classList.add('extend-upload-success')
}, 1500)
return
}
if (this.config.action) {
this.uploadImg()
} else {
this.toBase64()
}
}
}
}
/**
* 拖拽
* @param e
*/
dropHandle(e) {
const self = this
e.preventDefault()
// 如果图片限制大小
if (self.config.size && self.file.size >= self.config.size * 1024 * 1024 && self.config.loading) {
self.quillLoading.classList.add('extend-upload-warning-color')
self.quillLoading.classList.remove('extend-upload-success')
self.quillLoading.innerHTML = '图片大小超过限制'
setTimeout(function () {
self.quillLoading.classList.remove('extend-upload-warning-color')
self.quillLoading.classList.add('extend-upload-success')
}, 1500)
return
}
self.file = e.dataTransfer.files[0]; // 获取到第一个上传的文件对象
if (this.config.action) {
self.uploadImg()
} else {
self.toBase64()
}
}
/**
* @description 将图片转为base4
*/
toBase64() {
const self = this
const reader = new FileReader()
reader.onload = (e) => {
// 返回base64
self.imgURL = e.target.result
self.insertImg()
}
reader.readAsDataURL(self.file)
}
/**
* @description 上传图片到服务器
*/
uploadImg() {
const self = this
let quillLoading = self.quillLoading
let config = self.config
// 构造表单
let formData = new FormData()
formData.append(config.name, self.file)
// 自定义修改表单
if (config.editForm) {
config.editForm(formData)
}
// 创建ajax请求
let xhr = new XMLHttpRequest()
xhr.open('post', config.action, true)
// 如果有设置请求头
if (config.headers) {
config.headers(xhr)
}
if (config.change) {
config.change(xhr, formData)
}
xhr.onload = function (e) {
if (self.config.loading) {
setTimeout(function () {
quillLoading.classList.add('extend-upload-success')
}, 1000)
}
if (xhr.status === 200) {
self.quill.root.innerHTML = self.quill.root.innerHTML.replace('[uploading...]', '')
let res = JSON.parse(xhr.responseText)
self.imgURL = config.response(res)
self.insertImg()
} else {
self.quill.root.innerHTML = self.quill.root.innerHTML.replace('[uploading...]', '[upload error]')
}
}
// 开始上传数据
xhr.upload.onloadstart = function (e) {
let length = (self.quill.getSelection() || {}).index || self.quill.getLength()
self.quill.insertText(length, '[uploading...]', { 'color': 'red'}, true)
if (self.config.loading) {
quillLoading.classList.remove('extend-upload-success')
}
if (config.start) {
config.start()
}
}
// 上传过程
xhr.upload.onprogress = function (e) {
let complete = (e.loaded / e.total * 100 | 0) + '%'
if (self.config.loading) {
quillLoading.innerHTML = '已上传' + complete
}
}
// 当发生网络异常的时候会触发,如果上传数据的过程还未结束
xhr.upload.onerror = function (e) {
self.quill.root.innerHTML = self.quill.root.innerHTML.replace('[uploading...]', '[upload error]')
if (self.config.loading) {
self.quillLoading.classList.add('extend-upload-warning-color')
quillLoading.innerHTML = '网络异常,失败请重试'
setTimeout(function () {
self.quillLoading.classList.remove('extend-upload-warning-color')
quillLoading.classList.add('extend-upload-success')
}, 1500)
}
if (config.error) {
config.error()
}
}
// 上传数据完成(成功或者失败)时会触发
xhr.upload.onloadend = function (e) {
if (config.end) {
config.end()
}
}
xhr.send(formData)
}
/**
* @description 往富文本编辑器插入图片
*/
insertImg() {
const self = this
self.quill.blur()
let length = (this.quill.getSelection() || {}).index || this.quill.getLength()
self.quill.insertEmbed(length, 'image', self.imgURL, 'user')
self.quill.setSelection(length + 1)
}
}