FE_judgmentPoint/src/components/quill/index.vue

<template>
    <div class="quill" :class="[classes,readonly ? 'readonly' : '']">
        <div :ref="toref" :style="styles" v-loading="loading"></div>

        <el-upload :action="this.api.fileupload" :before-upload="beforeUpload" :on-success="editorUploadSuccess" style="display: none">
            <el-button class="editorUpload" ref="editorUpload" size="small" type="primary">点击上传</el-button>
        </el-upload>
    </div>
</template>

<script>
    import Quill from 'quill';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import toolbarOptions from './options'

    export default {
        name: 'quill',
        props: {
            toref: {
                type: String,
                default: 'editor'
            },
            value: {
                type: String,
                default: ''
            },
            readonly: {
                type: Boolean,
                default: false
            },
            toTop: {
                type: Boolean,
                default: true
            },
            border: {
                type: Boolean,
                default: false
            },
            height: {
                type: Number
            },
            minHeight: {
                type: Number
            }
        },
        data () {
            let that = this
            return {
                Quill: null,
                currentValue: '',
                options: {
                    theme: 'snow',
                    bounds: document.body,
                    debug: 'warn',
                    modules: {
                        toolbar: {
                            container: this.readonly ? [] : toolbarOptions,
                            // handlers: {
                            //     'image' (value) {
                            //         console.log(22,value,that.Quill,that.toref,that.$refs)
                            //         if (value) {
                            //             that.qu = that.Quill
                            //             // 调用iview图片上传
                            //             document.querySelector('.editorUpload').click()
                            //         } else {
                            //             this.Quill.format('image', false);
                            //         }
                            //     }
                            // }
                        }
                    },
                    placeholder: '',
                    readOnly: this.readonly
                },
                loading: false,
                quillArr: [],
                qu: null
            }
        },
        computed: {
            classes () {
                return [
                    {
                        'quill-no-border': !this.border
                    }
                ];
            },
            styles () {
                let style = {};
                if (this.minHeight) {
                    style.minHeight = `${this.minHeight}px`;
                }
                if (this.height) {
                    style.height = `${this.height}px`;
                }
                return style;
            }
        },
        watch: {
            value: {
                handler (val) {
                    if (val !== this.currentValue) {
                        this.currentValue = val;
                        if (this.Quill) {
                            this.Quill.pasteHTML(this.value);
                        }
                    }
                },
                immediate: true
            }
        },
        mounted () {
            // console.log(this.$refs.editorUpload.$el)
            this.init();
        },
        beforeDestroy () {
            // 在组件销毁后销毁实例
            this.Quill = null;
        },
        methods: {
            init () {
                let toeval = "this.$refs."+this.toref
                const editor = eval(toeval)
                // 初始化编辑器
                this.Quill = new Quill(editor, this.options);
                this.quillArr.push(this.Quill)
                console.log(22,this.toref,this.Quill,this.quillArr)

                // 默认值
                this.Quill.pasteHTML(this.currentValue);
                if(this.toTop){
                    this.$nextTick(() => {
                        window.scrollTo(0,0)
                    })
                }
                // 绑定事件
                this.Quill.on('text-change', (delta, oldDelta, source) => {
                    const html = this.$refs[this.toref].children[0].innerHTML;
                    const text = this.Quill.getText();
                    const quill = this.Quill;
                    // 更新内部的值
                    this.currentValue = html;
                    // 发出事件 v-model
                    this.$emit('input', html);
                    // 发出事件
                    this.$emit('on-change', { html, text, quill });
                });
                // 将一些 quill 自带的事件传递出去
                this.Quill.on('text-change', (delta, oldDelta, source) => {
                    console.log(this.Quill)
                    this.$emit('on-text-change', delta, oldDelta, source);
                });
                this.Quill.on('selection-change', (range, oldRange, source) => {
                    this.$emit('on-selection-change', range, oldRange, source);
                });
                this.Quill.on('editor-change', (eventName, ...args) => {
                    this.$emit('on-editor-change', eventName, ...args);
                });
            },
            beforeUpload(file){
                console.log('上传前：',this.qu,this.toref,this.Quill,this.quillArr)
                this.loading = true
            },
            editorUploadSuccess (res) {
                // 获取富文本组件实例
                // let toeval = "this.$refs."+this.toref+'.quill'
                let toeval = 'this.$refs.editor2'
                // console.log("toeval",toeval);
                let quill = eval(toeval);
                // let quill = this.Quill
                // 如果上传成功
                console.log(11,this.$refs)

                // if (res.data.filesResult.fileUrl) {
                //     // 获取光标所在位置
                //     let length = quill.selection.savedRange.index;
                //     // 插入图片，res为服务器返回的图片链接地址
                //     quill.insertEmbed(length, 'image', res.data.filesResult.fileUrl)
                //     // 调整光标到最后
                //     quill.setSelection(length + 1)
                // } else {
                //     this.$message.success('图片插入失败')
                // }
                this.loading = false
            },
        }
    }
</script>
<style lang="scss" scoped>
    .quill-no-border{
        .ql-toolbar.ql-snow{
            border: none;
            border-bottom: 1px solid #e8eaec;
        }
        .ql-container.ql-snow{
            border: none;
        }
    }
</style>