改造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. 小松之LINUX 驱动学习笔记(开篇)

    时间对每个人都是公平的,就看你怎么对待他.每天多努力一点,未来就会轻松一点.作为一名北漂,感受着首都的压力,也曾萌生过逃离北上广的想法,但是,最后我最终还是选择留下来,随着年龄的增长,我已经没有那么多 ...

  2. STM32 ADC多通道转换DMA模式与非DMA模式两种方法(HAL库)

    一.非DMA模式(转) 说明:这个是自己刚做的时候百度出来的,不是我自己做出来的,因为感觉有用就保存下来做学习用,原文链接:https://blog.csdn.net/qq_24815615/arti ...

  3. Java基础学习总结(61)——Java项目开发要注意的60个问题

    1. 首先写代码的时候最好不要有缺陷.最好的修复方法就是让 bug 胎死腹中. 良好的单元测试 强制数据库约束 使用输入验证框架 避免未实现的"else"条件 在应用到主程序之前知 ...

  4. POJ 3243

    Babystep算法.具体为什么,我也不太明白,好像资料不多. #include <iostream> #include <cstdio> #include <cstri ...

  5. FastDFS原理系列文章

    FastDFS原理系列文章 基于FastDFS 5.03/5.04 2014-12-19 一.概述 FastDFS文档极少,仅仅能找到一些宽泛的架构文档,以及ChinaUnix论坛上作者对网友提问的一 ...

  6. 【Swift】学习笔记(六)——函数

    函数  懂编程语言的来说这个是最主要的了,不论什么语言都有函数这个概念.函数就是完毕特定任务的独立代码块. 函数怎么创建: 1.创建一个无參无返回值的函数(实际上全部的函数都有返回值,这个函数返回vo ...

  7. 【Java并发编程实战】—–synchronized

    在我们的实际应用其中可能常常会遇到这样一个场景:多个线程读或者.写相同的数据,訪问相同的文件等等.对于这样的情况假设我们不加以控制,是非常easy导致错误的. 在java中,为了解决问题,引入临界区概 ...

  8. node generator 模仿co

    exports.run = function(fn ){ return function(onDone){ function thunk(tfn , ctx){ return function(sql ...

  9. 在单机上安装多个oracle实例

    1   在 hp unix上安装 oracle 10g ,这个不解释,直接安装好. 创建组oinstall,dba,用户oracle  [root@node1 ~]# groupadd oinstal ...

  10. wamp openssl

    在这一章节里, 我记录了一下如何在 wamp 环境下配置 ssl 前提条件 在设置 Apache + SSL 之前, 需要确认 Apache 已经安装并可以正常工作. 并且 ssl 需要的文件在如下的 ...