vue-quill-editor使用 quill-image-resize-module imports错误

vue-quill-editor富文本编辑器

使用vue-quill-editor弄一个富文本编辑器，字体样式，图片

需求

字体样式修改，图片上传并且要可以调整大小，图片可以拖拽上传，于是先使用quill-image-drop-module+ivew quill-image-resize-module，后发现quill-image-drop-module没法监控拖拽的上传图片（图片太大音响提交，于是先上传图片，内容中只存放图片链接地址），后网上找到quill-image-extend-module+vew quill-image-resize-module

1. 安装就不说了，到https://www.npmjs.com/搜索相关模块安装即可

2. main.js引入

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

3. 组件界面

<script>
    import {uploadFile} from "@/api/index"
    import {Quill,quillEditor } from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import { ImageExtend, QuillWatch } from 'quill-image-extend-module'
    import imageResize from 'quill-image-resize-module'
    Quill.register('modules/ImageExtend', ImageExtend)
    Quill.register('modules/imageResize', imageResize)



    var toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
        ['blockquote', 'code-block'],     //引用，代码块


        [{'header': 1}, {'header': 2}],        // 标题，键值对的形式；1、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': []}],    //对齐方式


        ['clean'],    //清除字体样式
        ['image', 'video']    //上传图片、上传视频
    ]
    export default {
        data() {
            return {
                accessToken: {},
                uploadFileUrl: uploadFile,
                loading: false,
                content: ``,
                editorOption: {
                    modules: {
                        ImageExtend: {
                            loading: true,
                            name: 'file',
                            action: uploadFile,
                            headers: (xhr) => {
                                xhr.setRequestHeader("accessToken",this.getStore("accessToken"))
                            },
                            response: (res) => {
                                return res.result
                            }
                        },
                        toolbar: {
                            container: toolbarOptions,
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        alert('自定义图片')
                                        // document.querySelector('.ivu-upload .ivu-btn').click()
                                        QuillWatch.emit(this.quill.id)
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        },
                        imageResize: {}
                    },
                    theme: 'snow'
                }
            }
        }, computed: {
            editor() {
                return this.$refs.myQuillEditor.quill;
            },
        }, methods: {
            init() {
                this.accessToken = {
                    accessToken: this.getStore("accessToken")
                };
                console.log("---------------------------------")
                console.log(this.accessToken)
                /*let v = JSON.parse(Cookies.get("userInfo"));
                // 转换null为""
                for (let attr in v) {
                    if (v[attr] == null) {
                        v[attr] = "";
                    }
                }*/
            },
            handleSuccess(res) {
                // 获取富文本组件实例
                let quill = this.$refs.myQuillEditor.quill
                // 如果上传成功
                if (res.success == true) {
                    // 获取光标所在位置
                    let length = quill.getSelection().index;
                    // 插入图片，res为服务器返回的图片链接地址
                    quill.insertEmbed(length, 'image', res.result)
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    // 提示信息，需引入Message
                    Message.error('图片插入失败')
                }
            },
            onEditorReady(editor) { // 准备编辑器
            },
            onEditorBlur() {
            }, // 失去焦点事件
            onEditorFocus() {
            }, // 获得焦点事件
            onEditorChange() {
            }, // 内容改变事件
            saveHtml: function (event) {
                this.loading = true;
                alert(this.content);
            }
        },
        mounted() {
            this.init();
        }
    }
</script>

使用过程中quill-image-resize-module发生imports错误，解决方案

vue.config.js加入如下

const webpack = require('webpack')

    plugins: [
              new webpack.ProvidePlugin({
            'window.Quill': 'quill/dist/quill.js',
            'Quill': 'quill/dist/quill.js'
        })
    ]

博客组件中，变量名小写，小写

完成效果