改造vue-quill-editor: 结合element-ui上传图片到服务器

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图片上传,复制粘贴,拖拽的更多相关文章

  1. 用Vue来实现图片上传多种方式

    没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element ...

  2. 百度ueditor vue项目应用 -- 图片上传源码修改

    本文目的有两个,一.废掉单图上传,二.改造多图上传 大家都知道百度ueditor不是针对vue项目开发的,官方文档提供的源码包里有需要后端配置的接口,but到vue项目就不太好办了,网上有些文章也介绍 ...

  3. 移动端vue项目的图片上传插件

    有一移动端项目,使用的vant-ui.可是vant自带的Uploader似乎不支持一次选择多张图片上传的功能. 于是乎:在https://www.npmjs.com/查找发现找到 vue-upload ...

  4. vue.js框架图片上传组件

    html: <div id="app"> <div class="hello"> <div class="upload& ...

  5. vue+element-ui upload图片上传前大小超过4m,自动压缩到指定大小,长宽

    最近项目需要实现一个需求,用户上传图片时,图片大小超过4M,长宽超过2000,需要压缩到400k,2000宽高.在git上找到一个不错的方法,把实现方法总结一下: 安装image-conversion ...

  6. Vue 将本地图片上传到阿里云

    一.获取服务器通行证(即获取AccessKey和accessKeySecret) getAccess () { let that = this let url = '服务器地址' let params ...

  7. vue移动端图片上传压缩

    上传压缩方法 import {api} from '../../api/api.js'; import axios from 'axios'; export function imgPreview ( ...

  8. vue富文本编辑器vue-quill-editor使用总结(包含图片上传,拖拽,放大和缩小)

    vue-quill-editor是vue很好的富文本编辑器,富文本的功能基本上都支持,样式是黑白色,简洁大方. 第一步下载 vue-quill-editor: npm i vue-quill-edit ...

  9. H5 利用vue实现图片上传功能。

    H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...

  10. vue 图片上传功能

    这次做了vue页面的图片上传功能,不带裁剪功能的! 首先是html代码,在input框上添加change事件,如下:   <ul class="clearfix">   ...

随机推荐

  1. hibernate在maven中自动生成

    1.构建数据库连接 2.新建maven项目,利用工具生成hibernate相应的类和xml文件 新建pojo包 右击项目 点击Configure Facets 选择hibernate 选择包 选择驱动 ...

  2. alg--动态规划(dynamic planning)

    怎么开头呢? 一句话概括吧, dp的思想就是递归的反思想. 参考的理化: https://www.cnblogs.com/steven_oyj/archive/2010/05/22/1741374.h ...

  3. solrj 操作 solr 集群版

    一.添加 @Test public void testAddDocument() throws Exception{ //创建一个集群的连接,应该使用 CloudSolrServer,//zkHost ...

  4. C/C++ 图像二进制存储与读取

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50782792 在深度学习时,制作样本数 ...

  5. BA-闭式冷却塔系统

  6. 嵌入式linux和pc机的linux对照

    linux本身具备的非常大长处就是稳定,内核精悍,执行时须要的资源少.嵌入式linux和普通linux并无本质差别. 在嵌入式系统上执行linux的一个缺点就是其核心架构没有又一次设计过,而是直接从桌 ...

  7. struts2提交多个对象带图片

    一:实体类 二:前台页面 三:Action处理

  8. Qt on Android:资源文件系统qrc与assets

    使用 Qt 为 Android 开发应用时,有时我们的应用会携带一些资源文件,如 png . jpg 等,也可能有一些配置文件,如 xml 等.这些文件放在哪里呢? 有两种方式: qrc assets ...

  9. [MySQL] 按年度、季度、月度、周、日统计查询

    该死的mysql没有提供unix时间戳的专门处理函数,所以,如果遇到时间分组,而你用的又是整型unix时间戳,则只有转化为mysql的其他日期类型!   FROM_UNIXTIM()将unix时间戳转 ...

  10. C#读出文本文件内容,遍历数组筛选出 含有汉字对应的拼音字符

    情景描述:由于任务需要,现有一用户表数据,用户名 字段 在新增用户时,输入中文和拼音两种,先要区分同时含有中文和拼音字母的用户名.由于数据很多,可以通过一段代码完成查询: 前提:在阅读本文之前可以先了 ...