vue中使用vue-quill-editor并且粘贴直接上传图片

1.安装
npm install vue-quill-editor 
2.引入到项目中
        有两种挂载方式： 全局挂载 和 在组件中挂载，根据自己的项目需求选择，一般用到富文本编辑都是在某一个项目中，这里只写在项目中挂载的方式

import { quillEditor } from 'vue-quill-editor'
 
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
export default {
  components: {
    quillEditor
  }
}
3.在页面上写组件

<el-upload v-show="false" id="quill-upload" ref="annexUpload" action="上传的路径" name="content" :limit="1" list-type="picture" :on-exceed="handleExceed" :on-error="handleError" :file-list="uploadList" :with-credentials="true" :auto-upload="true" />
<quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @change="onEditorChange($event)"
</quill-editor>

// 内容改变事件
  onEditorChange({ quill, html, text }) {
    console.log('editor change!', quill, html, text)
    this.content = html

      this.$emit('change', html)

  },

  // 文件上传限制

    handleExceed(files, fileList) {

      this.$message.warning(`当前限制一次性上传最多 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)

    },

    // 文件上传失败提示

    handleError(err, file, fileList) {

      this.$message.warning(`文件上传失败，请尝试重新上传，文件失败原因为： ${err}`)

    }

4.配置option

  editorOption: {

        placeholder: '请在这里输入文字或粘贴图片',

        theme: 'snow',

        modules: {

          toolbar: {

            container: toolbarOptions,

            handlers: {

              image: function(value) {

                if (value) {

                  document.querySelector('#quill-upload input').click()

                } else {

                  this.quill.format('image', false)// 禁用quill内部上传图片

                }

              }

            }

          }

        }

      }

toolbarOptions：[

  [],

  // ['bold', 'italic', 'underline', 'strike'],

  ['blockquote', 'code-block'],

  [{ header: 1 }, { header: 2 }],

  // [{'list': 'ordered'}, {'list': 'bullet'}],

  [{ script: 'sub' }, { script: 'super' }],

  [{ indent: '-1' }, { indent: '+1' }],

  [{ direction: 'rtl' }],

  [{ size: ['small', false, 'large', 'huge'] }],

  [{ header: [1, 2, 3, 4, 5, 6, false] }],

  // [{'color': []}, {'background': []}],

  // [{'font': []}],

  // [{'align': []}],

  // ['link', 'image', 'video'],

  ['clean']

]

 5.初始化编辑器并添加粘贴事件

 粘贴图片调用接口，转换base64格式图片

// 初始化

    initPic() {

      if (this.init) {

        setTimeout(() => {

          this.init = false

          toolbarOptions[0] = ['image']

          const quill = this.$refs.myQuillEditor.quill

          this.$forceUpdate()

          quill.root.addEventListener(

            'paste',

            (evt) => {

              if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {

                evt.preventDefault(); // 必须阻止默认行为，会粘贴两次，并且图片的base64格式

                [].forEach.call(evt.clipboardData.files, (file) => {

                  if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {

                    return

                  }

                  var formData = new FormData()

                  formData.append('uploadFile', file)

                  uploadPicTask({

                    data: formData

                  }).then((res) => {

                    var range = quill.getSelection()

                    if (range) {

                      // this.ruleForm.problemPics = this.ruleForm.problemPics + ',' + res.data

                      const quill = this.$refs.myQuillEditor.quill

                      const length = quill.getSelection().index

                      quill.insertEmbed(length, 'image', '/api/management/problem/pic/' + res.data)

                      quill.setSelection(length + 1)

                      // eslint-disable-next-line no-unused-vars

                      let fileType = null

                      if (file.raw && file.raw.type) {

                        fileType = file.raw.type

                      } else {

                        fileType = file.type

                      }

                      this.uploadList = []

                      this.$refs.myQuillEditor.quill.setSelection(range.index + 1)

                    }

                  })

                })

              }

            },

            false

          )

        }, 10)

      }

    },