vuevuequilleditor七牛上传图片

原理：
1、监听 quill 富文本编辑器图片点击事件
2、新建一个辅助上传输入框并隐藏 <input type = “file” id=”myupload” @change=”uploadImg” v-show=”false” />
3、当单机 quill 添加图片的时候触发辅助文件输入框打开文件上传窗口，这样就可以获取到 File 对象，在上传的时候使用
4、七牛上传需要 file, key, token（从后台获取)。上传成功以后，会返回一个对象，{hash: ”, key: ”} 我们需要拼接图片地址然后显示到 quill 中。图片地址 七牛上传地址 +key
**
下面代码就可以修改 quill 中的图片地址

let quill = this.$refs.myQuillEditor.quill
          let length = quill.getSelection().index
          // 插入图片  res.info 为服务器返回的图片地址
          quill.insertEmbed(length, 'image', 'https://qiniutest.tech/' + complete.key)
          // 调整光标到最后
          quill.setSelection(length + 1)

**

<template>
  <div id='quillEditorQiniu'>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!-- 辅助 -->
    <!-- <input type="file" id="myUpload" @change="uploadImg" v-show="false"> -->
    <!-- 这里用的是 elementui 的上传辅助，其实和 input type="file" 是一样的都是为了获取 File 对象 -->
    <el-upload
      class="avatar-uploader"
      :action="'https://qiniutest.tech/'"
      name="img"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </el-upload>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from 'vue-quill-editor'
import * as qiniu from 'qiniu-js'
const toolbarOptions = [['bold', 'italic', 'underline', 'strike'],
  [{'color': []}],
  ['link', 'image']
]
// 自定义编辑器的工作条
export default {
  components: {quillEditor},
  mounted () {
    // 这里是从后台接口获取的七牛上传所需要的 token
    this.$store.dispatch('uploadToken')
    // 工具栏中的图片图标被单击的时候调用这个方法打开上传窗口
    let imgHandler = function (state) {if (state) {document.querySelector('.avatar-uploader input').click()}
    }
    // 当工具栏中的图片图标被单击的时候
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },

下面是封装组件的代码 QuillEditorQiniu.vue

<template>
  <div id='quillEditorQiniu'>
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
    <!-- 辅助 -->
    <!-- <input type="file" id="myUpload" @change="uploadImg" v-show="false"> -->
    <el-upload
      class="avatar-uploader"
      :action="'https://qiniutest.tech/'"
      name="img"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload"
    >
    </el-upload>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from 'vue-quill-editor'
import * as qiniu from 'qiniu-js'
const toolbarOptions = [['bold', 'italic', 'underline', 'strike'],
  [{'color': []}],
  ['link', 'image']
]
// 自定义编辑器的工作条
export default {
  components: {quillEditor},
  mounted () {this.$store.dispatch('uploadToken')
    // 工具栏中的图片图标被单击的时候调用这个方法
    let imgHandler = function (state) {if (state) {document.querySelector('.avatar-uploader input').click()}
    }
    // 当工具栏中的图片图标被单击的时候
    this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', imgHandler)
  },
  data () {
    return {
      content: '',
      editorOption: {
        placeholder: '请输入',
        theme: 'snow',
        modules: {
          toolbar: {container: toolbarOptions}
        }
      }
    }
  },
  methods: {onEditorChange (event) {console.log(event, 'change')
      this.$emit('getEditorInfo', event)
    },
    beforeUpload (request, file) {var observable = qiniu.upload(request, request.name, this.$store.state.upload_token)
      observable.subscribe({next (res) {console.log(res, 'r')
        },
        error (error) {console.log(error)
        },
        complete: (complete) => {console.log(complete, 'c')
          let quill = this.$refs.myQuillEditor.quill
          let length = quill.getSelection().index
          // 插入图片  res.info 为服务器返回的图片地址
          quill.insertEmbed(length, 'image', 'https://qiniutest.tech/' + complete.key)
          // 调整光标到最后
          quill.setSelection(length + 1)
        }
      })
    },
    // 上传图片成功
    uploadSuccess (res, file) {
      // file 返回的文件信息，也可以在这里调用七牛上传。console.log(file, 'success')
    },
    // 上传图片失败
    uploadError (res, file) {console.log(res, file, 'error')
    }
  }
}
</script>

<style scoped>
</style>