# quill-image-extend-module ：实现vue-quill-editor图片上

big_cat 发布于2019-08-22 14:01 / 3482人阅读

摘要：的增强模块，功能提供图片上传到服务器的功能复制插入拖拽插入显示上传进度显示上传成功或者失败支持与其他模块一起使用例如调整图片大小富文本框参数设置的所有可配置项可选参数是否显示上传进

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

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

云服务器 GPU云服务器实现图片上传 html实现图片阴影 java实现透明图片 asp实现上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92776.html

vue-quill-editor自定义图片上传

摘要：我们通常都会使用富文本编辑器在后台编辑内容，开发当然也少不了，我们通过官网的链接可以找到一些资源，或者去上查找一些开源的编辑器。我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默...

oneasp 2019-08-20 17:26 评论0 收藏0
vue-quill-editor自定义图片上传

摘要：我们通常都会使用富文本编辑器在后台编辑内容，开发当然也少不了，我们通过官网的链接可以找到一些资源，或者去上查找一些开源的编辑器。我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默...

miracledan 2019-08-01 17:01 评论0 收藏0
基于 Vue 的移动端富文本编辑器 vue-quill-editor 实战

摘要：优秀的富文本编辑器有很多，比如，等，但并不是每个都能在移动端有很好的表现。是百度的老牌富文本编辑器，但界面有一股上世纪的感觉，官网最新的一条动态停留在。优秀的富文本编辑器有很多，比如：UEditor，wangEditor 等，但并不是每个都能在移动端有很好的表现。我们暂且不讨论移动端是否真的需要富文本，既然有这需求，就把它实现出来。失败的尝试正确的选择是成功的开始，开发之前肯定要做一些...

wing324 2019-05-27 17:41 评论0 收藏0
改造vue-quill-editor(二)：10秒搞定自定义上传图片到服务器

摘要：原生上传图片到服务器上次给大家分享过下面的文章结合上传图片到服务器基于上面的原理，我又替大家把整个配置封装好了，大家在使用的时候直接引入配置文件即可。原生上传图片到服务器上次给大家分享过下面的文章结合element-ui上传图片到服务器基于上面的原理，我又替大家把整个配置封装好了，大家在使用的时候直接引入配置文件即可。无需引入element-ui，并且增加了部分功能：可限制图片...

xushaojieaaa 2019-08-21 18:37 评论0 收藏0