vue-quill-editor的加强模块，

功用：

供应图片上传到服务器的功用

复制插进去

拖拽插进去

显现上传进度

显现上传胜利或许失利

支撑与其他模块一同运用(比方调解图片大小)

Install

npm install quill-image-extend-module --save-dev

use

import {quillEditor, Quill} from 'vue-quill-editor'

import {container, ImageExtend} from 'quill-image-extend-module'

Quill.register('modules/ImageExtend', ImageExtend)

example

import {quillEditor, Quill} from 'vue-quill-editor'

import {container, ImageExtend} from 'quill-image-extend-module'

Quill.register('modules/ImageExtend', ImageExtend)

export default {

components: {quillEditor},

data() {

return {

content: '',

// 富文本框参数设置

editorOption: {

modules: {

ImageExtend: {

loading: true,

name: 'img',

action: updateUrl,

response: (res) => {

return res.info

}

},

toolbar: {

container: container,

handlers: {

'image': function () {

document.querySelector('.quill-image-input').click()

}

}

}

}

}

}

}

}

quill-image-extend-module 的一切可设置项

editorOption: {

modules: {

ImageExtend: {

loading: true, // 可选参数 是不是显现上传进度和提醒语

name: 'img', // 图片参数名

size: 3, // 可选参数 图片大小，单元为M，1M = 1024kb

action: updateUrl, // 服务器地点, 假如action为空，则采纳base64插进去图片

// response 为一个函数用来猎取服务器返回的详细图片地点

// 比方服务器返回{code: 200; data:{ url: 'baidu.com'}}

// 则 return res.data.url

response: (res) => {

return res.info

},

headers: (xhr) => {}, // 可选参数 设置要求头部

start: () => {}, // 可选参数 自定义最先上传触发事宜

end: () => {}, // 可选参数 自定义上传完毕触发的事宜，不管胜利或许失利

error: () => {}, // 可选参数 自定义收集毛病触发的事宜

change: (xhr, formData) => {} // 可选参数 挑选图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData

},

toolbar: {

container: container, // container为工具栏，此次引入了悉数工具栏，也可自行设置

handlers: {

'image': function () { // 挟制本来的图片点击按钮事宜

document.querySelector('.quill-image-input').click()

}

}

}

}

}

注意事项 (matters need attention)

因为差别的用户的服务器返回的数据格式不尽相同

因而

在设置中，你必需以下操纵

// 你必需把返回的数据中所包括的图片地点 return 归去

respnse: (res) => {

return res.info // 这里切纪要return回你的图片地点

}

比方你的服务器返回的胜利数据为

{

code: 200,

starus: true,

result: {

img: 'http://placehold.it/100x100' // 服务器返回的数据中的图片的地点

}

}

那末你应该在参数中写为：

// 你必需把返回的数据中所包括的图片地点 return 归去

respnse: (res) => {

return res.result.img // 这里切纪要return回你的图片地点

}

与其他模块一同运用(以resize-module为例子)

import {quillEditor, Quill} from 'vue-quill-editor'

import {container, ImageExtend} from 'quill-image-extend-module'

import ImageResize from 'quill-image-resize-module'

Quill.register('modules/ImageExtend', ImageExtend)

// use resize module

Quill.register('modules/ImageResize', ImageResize)

export default {

components: {quillEditor},

data() {

return {

content: '',

// 富文本框参数设置

editorOption: {

modules: {

ImageResize: {},

ImageExtend: {

loading: true,

name: 'img',

size: 2, // 单元为M, 1M = 1024KB

action: updateUrl,

headers: (xhr) => {

},

response: (res) => {

return res.info

}

},

toolbar: {

container: container,

handlers: {

'image': function () {

document.querySelector('.quill-image-input').click()

}

}

}

}

}

}

}

}