实现quill-editor富文本框在google chrome实现截图黏贴图片功能：

1、npm install quill-editor -- save

2、添加组件

<quill-editor v-model="content"

              ref="myQuillEditor"

              :options="editorOption"

              @blur="onEditorBlur($event)"

              @focus="onEditorFocus($event)"

              @ready="onEditorReady($event)"

              @change="onEditorChange">

</quill-editor>

3、引入相关文件及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'

 

export default {

components: {

quillEditor

},

    data () {

return {

            content:'',

            editorOption:{}

};

    },

    methods: {

onEditorBlur(quill) {

// console.log('editor blur!', quill)

        },

        onEditorFocus(quill) {

// console.log('editor focus!', quill)

        },

        onEditorReady(quill) {

// console.log('editor ready!', quill)

        },

        onEditorChange({ quill, html, text }) {

// console.log('editor change!', quill, html, text)

            this.content = html

}

},

    computed: {

editor() {

return this.$refs.myQuillEditor.quill

        }

},

}

4、引用 image-paste 插件 实现谷歌浏览器图片黏贴功能

image-paste下载链接https://github.com/LiangCY/quill-image-paste；

可以直接 下载 image-paste.min.js

导入：import '../../assets/js/image-paste.min.js' ；配置editorOption参数

//paste image as base64 编辑器中插入的是base64的图片编码

editorOption:{

modules: {

imagePaste: {        }

}

}

若是改为插入编辑器的图片url地址则

editorOption:{

modules: {

imagePaste: {

    addImageBlob: function (blob, callback) {

    var formData = new FormData()

    formData.append('image', blob)

    console.log(blob,callback)

    // your upload function, get the uploaded image url, add then

    let imageUrl = 'http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg'

    callback(imageUrl)

 }

       }

}

}

5、在vue-loader.conf.js文件需要添加

var webpack = require('webpack');

plugins: [

new webpack.ProvidePlugin({

'window.Quill':'quill'

    })

]

 

 

通过该流程配置可实现quill-editor富文本框在google chrome实现截图黏贴图片功能