quill-image-extend-module

vue-quill-editor的增强模块，

功能：

• 提供图片上传到服务器的功能
• 复制插入
• 拖拽插入
• 显示上传进度
• 显示上传成功或者失败
• 支持与其他模块一起使用（例如调整图片大小）

更新情况

• version 1.1
  • 增加上传显示文字样式
  • 增加图片超过自定义大小的回调 sizeError
  • 修复同一页面多个富文本编辑器上传图片只能插入第一个编辑器的bug
  • 引入QuillWatch 全局监听多个富文本编辑器

Install

1npm install quill-image-extend-module --save-dev

use

1  import {quillEditor, Quill} from 'vue-quill-editor'
2  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
3
4  Quill.register('modules/ImageExtend', ImageExtend)

example

1<template>
2  <div class="quill-wrap">
3    <quill-editor
4      v-model="content"
5      ref="myQuillEditor"
6      :options="editorOption"
7    >
8    </quill-editor>
9  </div>
10</template>
11<script>
12  import {quillEditor, Quill} from 'vue-quill-editor'
13  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
14
15  Quill.register('modules/ImageExtend', ImageExtend)
16  export default {
17    components: {quillEditor},
18    data() {
19      return {
20       content: '',
21        // 富文本框参数设置
22        editorOption: {
23          modules: {
24            ImageExtend: {
25              loading: true,
26              name: 'img',
27              action: updateUrl,
28              response: (res) => {
29                return res.info
30              }
31            },
32            toolbar: {
33              container: container,
34              handlers: {
35                'image': function () {
36                  QuillWatch.emit(this.quill.id)
37                }
38              }
39            }
40          }
41        }
42      }
43    }
44  }
45</script>
46

quill-image-extend-module 的所有可配置项

1 editorOption: {
2                     modules: {
3                         ImageExtend: {
4                             loading: true,  // 可选参数 是否显示上传进度和提示语
5                             name: 'img',  // 图片参数名
6                             size: 3,  // 可选参数 图片大小，单位为M，1M = 1024kb
7                             action: updateUrl,  // 服务器地址, 如果action为空，则采用base64插入图片
8                             // response 为一个函数用来获取服务器返回的具体图片地址
9                             // 例如服务器返回{code: 200; data:{ url: 'baidu.com'}}
10                             // 则 return res.data.url
11                             response: (res) => {
12                                 return res.info
13                             },
14                             headers: (xhr) => {},  // 可选参数 设置请求头部
15                             sizeError: () => {},  // 图片超过大小的回调
16                             start: () => {},  // 可选参数 自定义开始上传触发事件
17                             end: () => {},  // 可选参数 自定义上传结束触发的事件，无论成功或者失败
18                             error: () => {},  // 可选参数 上传失败触发的事件
19                             success: () => {},  // 可选参数  上传成功触发的事件
20                             change: (xhr, formData) => {} // 可选参数 选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
21                         },
22                         toolbar: {
23                             container: container,  // container为工具栏，此次引入了全部工具栏，也可自行配置
24                             handlers: {
25                                 'image': function () {  // 劫持原来的图片点击按钮事件
26                                     QuillWatch.emit(this.quill.id)
27                                 }
28                             }
29                         }
30                     }
31                 }

注意事项 （matters need attention）

由于不同的用户的服务器返回的数据格式不尽相同

因此 在配置中，你必须如下操作

1 // 你必须把返回的数据中所包含的图片地址 return 回去
2 respnse: (res) => {
3    return res.info  // 这里切记要return回你的图片地址
4 }

比如你的服务器返回的成功数据为

1{
2code: 200,
3starus: true,
4result: {
5    img: 'http://placehold.it/100x100' // 服务器返回的数据中的图片的地址
6 }
7}

那么你应该在参数中写为：

1 // 你必须把返回的数据中所包含的图片地址 return 回去
2 respnse: (res) => {
3    return res.result.img  // 这里切记要return回你的图片地址
4 }

与其他模块一起使用（以resize-module为例子）

1<template>
2  <div class="quill-wrap">
3    <quill-editor
4      v-model="content"
5      ref="myQuillEditor"
6      :options="editorOption"
7    >
8    </quill-editor>
9  </div>
10</template>
11<script>
12  import {quillEditor, Quill} from 'vue-quill-editor'
13  import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module'
14  import ImageResize from 'quill-image-resize-module'
15
16  Quill.register('modules/ImageExtend', ImageExtend)
17  // use resize module
18  Quill.register('modules/ImageResize', ImageResize)
19  export default {
20    components: {quillEditor},
21    data() {
22      return {
23        content: '',
24        // 富文本框参数设置
25        editorOption: {
26          modules: {
27            ImageResize: {},
28            ImageExtend: {
29              loading: true,
30              name: 'img',
31              size: 2,  // 单位为M, 1M = 1024KB
32              action: updateUrl,
33              headers: (xhr) => {
34              },
35              response: (res) => {
36                return res.info
37              }
38            },
39            toolbar: {
40              container: container,
41              handlers: {
42                'image': function () {
43                  QuillWatch.emit(this.quill.id)
44                }
45              }
46            }
47          }
48        }
49      }
50    }
51  }
52</script>
53

(如果觉得还不错，请右上角点击下星星，此致敬礼)