sorry everyone, 由于作者自身原因，没有精力和时间处理issues,该插件已经不做维护了，希望大家见谅。
quill-image-extend-module vue-quill-editor的增强模块，
功能：
提供图片上传到服务器的功能 复制插入 拖拽插入 显示上传进度 显示上传成功或者失败 支持与其他模块一起使用（例如调整图片大小） version 1.1
增加上传显示文字样式 增加图片超过自定义大小的回调 sizeError 修复同一页面多个富文本编辑器上传图片只能插入第一个编辑器的bug 引入QuillWatch 全局监听多个富文本编辑器 version 1.1.2
由于编辑器本身就有复制功能，因此取消了复制上传服务器的功能，避免冲突，复制上传采用富文本编辑器自带的功能 修复图片插入老是跑到最后面的问题 npm install quill-image-extend-module --save-dev import {quillEditor, Quill} from 'vue-quill-editor' import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module' Quill.register('modules/ImageExtend', ImageExtend)<template> <div> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" > </quill-editor> </div></template><script> import {quillEditor, Quill} from 'vue-quill-editor' import {container, ImageExtend, QuillWatch} 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 () { QuillWatch.emit(this.quill.id) } } } } } } } }</script>quill-image-extend-module 的所有可配置项 editorOption: { modules: { ImageExtend: { // 如果不作设置，即{} 则依然开启复制粘贴功能且以base64插入 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) => { // xhr.setRequestHeader('myHeader','myValue') }, // 可选参数 设置请求头部 sizeError: () => {}, // 图片超过大小的回调 start: () => {}, // 可选参数 自定义开始上传触发事件 end: () => {}, // 可选参数 自定义上传结束触发的事件，无论成功或者失败 error: () => {}, // 可选参数 上传失败触发的事件 success: () => {}, // 可选参数 上传成功触发的事件 change: (xhr, formData) => { // xhr.setRequestHeader('myHeader','myValue') // formData.append('token', 'myToken') } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData }, toolbar: { // 如果不上传图片到服务器，此处不必配置 container: container, // container为工具栏，此次引入了全部工具栏，也可自行配置 handlers: { 'image': function () { // 劫持原来的图片点击按钮事件 QuillWatch.emit(this.quill.id) } } } } }注意事项 （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为例子） <template> <div> <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" > </quill-editor> </div></template><script> import {quillEditor, Quill} from 'vue-quill-editor' import {container, ImageExtend, QuillWatch} 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: { name: 'img', size: 2, // 单位为M, 1M = 1024KB action: updateUrl, headers: (xhr) => { }, response: (res) => { return res.info } }, toolbar: { container: container, handlers: { 'image': function () { QuillWatch.emit(this.quill.id) } } } } } } } }</script>