實現vue-quill-editor圖片上傳，復制粘貼，拖拽

quill-image-extend-module

vue-quill-editor的增強模塊，

功能：

• 提供圖片上傳到服務器的功能
• 復制插入
• 拖拽插入
• 顯示上傳進度
• 顯示上傳成功或者失敗
• 支持與其他模塊一起使用（例如調整圖片大小）

更新情況

• version 1.1

  • 增加上傳顯示文字樣式
  • 增加圖片超過自定義大小的回調 sizeError
  • 修復同一頁面多個富文本編輯器上傳圖片只能插入第一個編輯器的bug
  • 引入QuillWatch 全局監聽多個富文本編輯器

• version 1.1.2

  • 由於編輯器本身就有復制功能，因此取消了復制上傳服務器的功能，避免沖突，復制上傳采用富文本編輯器自帶的功能
  • 修復圖片插入老是跑到最后面的問題

Install

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

use

import {quillEditor, Quill} from 'vue-quill-editor'
  import {container, ImageExtend, QuillWatch} 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, QuillWatch} 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 () {
                  QuillWatch.emit(this.quill.id)
                }
              }
            }
          }
        }
      }
    }
  }
</script>

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

editorOption: {
                     modules: {
                         ImageExtend: {  // 如果不作設置，即{}  則依然開啟復制粘貼功能且以base64插入 
                             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) => {
                             // xhr.setRequestHeader('myHeader','myValue')
                             },  // 可選參數 設置請求頭部
                             sizeError: () => {},  // 圖片超過大小的回調
                             start: () => {},  // 可選參數 自定義開始上傳觸發事件
                             end: () => {},  // 可選參數 自定義上傳結束觸發的事件，無論成功或者失敗
                             error: () => {},  // 可選參數 上傳失敗觸發的事件
                             success: () => {},  // 可選參數  上傳成功觸發的事件
                             change: (xhr, formData) => {
                             // xhr.setRequestHeader('myHeader','myValue')
                             // formData.append('token', 'myToken')
                             } // 可選參數 每次選擇圖片觸發，也可用來設置頭部，但比headers多了一個參數，可設置formData
                         },
                         toolbar: {  // 如果不上傳圖片到服務器，此處不必配置
                             container: container,  // container為工具欄，此次引入了全部工具欄，也可自行配置
                             handlers: {
                                 'image': function () {  // 劫持原來的圖片點擊按鈕事件
                                     QuillWatch.emit(this.quill.id)
                                 }
                             }
                         }
                     }
                 }

注意事項 （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, QuillWatch} 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: {
              name: 'img',
              size: 2,  // 單位為M, 1M = 1024KB
              action: updateUrl,
              headers: (xhr) => {
              },
              response: (res) => {
                return res.info
              }
            },
            toolbar: {
              container: container,
              handlers: {
                'image': function () {
                  QuillWatch.emit(this.quill.id)
                }
              }
            }
          }
        }
      }
    }
  }
</script>