vue如何给quill添加粘贴图片的功能

我们往往会使用qq或微信之类的截图工具，然后直接把截图粘贴进富文本中，quill没有提供粘贴图片的功能，所以我们要自己来开发一个。

我是借鉴（抄袭）了 quill-image-drop-module 里面的实现方式

这么做的原因还是因为他和quill一样，不提供图片上传服务器的问题。而且我也不需要拖拽图片这种功能，所以就剔除掉了。

<template>
    <div ref="editor"></div>
</template>

<script>
    export default {
        name: "editor",
        props: ['content'],
        data() {
            return {
                _content: '',
            }
        },
        watch: {
            //  监听父组件传递的content值，变化后更新富文本内容
            content(newVal, oldVal) {
                if (this.quill) {
                    if (newVal && newVal !== this._content) {
                        this._content = newVal;
                        this.quill.clipboard.dangerouslyPasteHTML(newVal);
                    } else if(!newVal) {
                        this.quill.setText('');
                    }
                }
            }
        },
        methods: {
            uploadToServer(file, callback) {
                var xhr = new XMLHttpRequest();
                var formData = new FormData();
                formData.append('upload', file);
                xhr.open('post', this.$ajax.defaults.baseURL + '/upload/blogUpload');
                xhr.withCredentials = true;
                xhr.responseType = 'json';
                xhr.send(formData);
                xhr.onreadystatechange = () => {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        callback(xhr.response);
                    }
                };
            }
        },
        mounted() {
            //  初始化quill
            this.quill = new Quill(this.$refs.editor, {
                theme: 'snow',
                modules: {
                    history: {
                        userOnly: true
                    },
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        [{ 'script': 'sub' }, { 'script': 'super' }],
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'align': [] }],
                        ['clean'],
                        ['link', 'image', 'video']
                    ],
                    syntax: true
                }
            });

            //  自定义粘贴图片功能
            this.quill.root.addEventListener('paste', evt => {
                if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
                    evt.preventDefault();
                    [].forEach.call(evt.clipboardData.files, file => {
                        if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                            return;
                        }
                        this.uploadToServer(file, (res) => {
                            var range = this.quill.getSelection();
                            if (range) {
                                //  在当前光标位置插入图片
                                toolbar.quill.insertEmbed(range.index, 'image', this.$ajax.defaults.baseURL + res.file.path);
                                //  将光标移动到图片后面
                                toolbar.quill.setSelection(range.index + 1);
                            }
                        });
                    });
                }
            }, false);

            //  监听富文本变化，更新父组件数据
            this.quill.on('text-change', () => {
                let html = this.$refs.editor.children[0].innerHTML;
                if (html === '<p><br></p>') html = '';
                this._content = html;
                this.$emit('edit', this._content);
            });
        }
    }
</script>

<style>
    .ql-snow .ql-editor pre.ql-syntax {
        background-color: #282c34;
        color: #abb2bf;
    }
</style>

我现在直接将粘贴的图片上传到服务器了，如果有其他想法的同学可以用其他方式。