vue-quill-editor-upload

A plug-in for uploading images to your server when you use vue-quill-editor.

富文本编辑器vue-quill-editor的辅助插件，用于上传图片到你的服务器

更新记录

当前版本：1.1

• 增加设置请求header的接口 headers()
• 增加input点击事件的接口 change()

install

• npm

npm install vue-quill-editor-upload --save  

use

You have to install vue-quill-editor first.

请确保您已安装了 vue-quill-editor

• import

import {quillRedefine} from 'vue-quill-editor-upload'

• demo

first

you must to do: :options="editorOption" to bound Parameters

你必须绑定option :options="editorOption"

1<template>
2  <!-- bidirectional data binding（双向数据绑定） -->
3  <quill-editor 
4                :options="editorOption">
5  </quill-editor>
6</template>
7

second

return editorOption

必须在return 中书写editorOPtion 并且设置默认为空对象

1 data () {
2      return {
3        content: '',
4        editorOption: {}  // 必须初始化为对象 init  to Object
5      }
6    }

three

init in created

在created生命周期中生成实际数据

created () {
      this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uplpadConfig: {
            action:  '',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              return respnse.info  // 这里切记要return回你的图片地址
            }
          }
        }
      )
     // console.log(this.editorOption)
    }

注意事项 （matters need attention）

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

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

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

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

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

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

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

example 完整用例

1<template>
2  <!-- bidirectional data binding（双向数据绑定） -->
3  <quill-editor v-model="content"
4                ref="myQuillEditor"
5                :options="editorOption">
6  </quill-editor>
7</template>
8
9<script>
10  import {quillRedefine} from 'vue-quill-editor-upload'
11  import {quillEditor} from 'vue-quill-editor'
12  export default {
13    components: {quillEditor, quillRedefine},
14    data () {
15      return {
16        content: '',
17        editorOption: {}  // 必须初始化为对象 init  to Object
18      }
19    },
20    created () {
21      this.editorOption = quillRedefine(
22        {
23          // 图片上传的设置
24          uplpadConfig: {
25            action: '',  // 必填参数 图片上传地址
26            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
27            // 你必须把返回的数据中所包含的图片地址 return 回去
28            res: (respnse) => {
29              return respnse.info
30            },
31            methods: 'POST',  // 可选参数 图片上传方式  默认为post
32            token: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
33            name: 'img',  // 可选参数 文件的参数名 默认为img
34            size: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
35            accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
36            // input点击事件  formData是提交的表单实体
37            change: (formData) => { 
38            },
39            // 设置请求头 xhr: 异步请求， formData: 表单对象
40            headers: (xhr, formData) => {
41                // xhr.setRequestHeader('myHeader','myValue');
42                // formData.append('token', '1234')
43            },
44            // start: function (){}
45            start: () => {
46            },  // 可选参数 接收一个函数 开始上传数据时会触发
47            end: () => {
48            },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
49            success: () => {
50            },  // 可选参数 接收一个函数 上传数据成功时会触发
51            error: () => {
52            }  // 可选参数 接收一个函数 上传数据中断时会触发
53          },
54          // 以下所有设置都和vue-quill-editor本身所对应
55          placeholder: '',  // 可选参数 富文本框内的提示语
56          theme: '',  // 可选参数 富文本编辑器的风格
57          toolOptions: [],  // 可选参数  选择工具栏的需要哪些功能  默认是全部
58          handlers: {}  // 可选参数 重定义的事件，比如link等事件
59        }
60      )
61      console.log(this.editorOption)
62    }
63  }
64</script>
65

quillRedefine 可接收的所有参数(all params)

1{
2          // 图片上传的设置
3          uplpadConfig: {
4            action: '',  // 必填参数 图片上传地址
5            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
6            // 你必须把返回的数据中所包含的图片地址 return 回去
7            res: (respnse) => {
8              return respnse.info
9            },
10            methods: 'POST',  // 可选参数 图片上传方式  默认为post
11            token: sessionStorage.token,  // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
12            name: 'img',  // 可选参数 文件的参数名 默认为img
13            size: 500,  // 可选参数   图片限制大小，单位为Kb, 1M = 1024Kb
14            accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',  // 可选参数 可上传的图片格式
15            // input点击事件  formData是提交的表单实体
16            change: (formData) => { 
17            },
18            // 设置请求头 xhr: 异步请求， formData: 表单对象
19            headers: (xhr, formData) => {
20                // xhr.setRequestHeader('myHeader','myValue');
21                // formData.append('token', '1234')
22            },
23            start: () => {
24            },  // 可选参数 接收一个函数 开始上传数据时会触发
25            end: () => {
26            },  // 可选参数 接收一个函数 上传数据完成（成功或者失败）时会触发
27            success: () => {
28            },  // 可选参数 接收一个函数 上传数据成功时会触发
29            error: () => {
30            }  // 可选参数 接收一个函数 上传数据中断时会触发
31          },
32          // 以下所有设置都和vue-quill-editor本身所对应
33          placeholder: '',  // 可选参数 富文本框内的提示语
34          theme: '',  // 可选参数 富文本编辑器的风格
35          toolOptions: [],  // 可选参数  选择工具栏的需要哪些功能  默认是全部
36          handlers: {}  // 可选参数 重定义的事件，比如link等事件
37}