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>