quill-image-extend-module

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

<template> ?<div class="quill-wrap"> ???<quill-editor ?????v-model="content" ?????ref="myQuillEditor" ?????:options="editorOption" ???> ???</quill-editor> ?</div></template><script> ?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() ???????????????} ?????????????} ???????????} ?????????} ???????} ?????} ???} ?}</script>

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为例子）

<template> ?<div class="quill-wrap"> ???<quill-editor ?????v-model="content" ?????ref="myQuillEditor" ?????:options="editorOption" ???> ???</quill-editor> ?</div></template><script> ?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() ???????????????} ?????????????} ???????????} ?????????} ???????} ?????} ???} ?}</script>

原文地址：https://segmentfault.com/a/1190000012992461

# quill-image-extend-module ：实现vue-quill-editor图片上传，复制粘贴，拖拽

原文地址：https://www.cnblogs.com/lalalagq/p/9958373.html