ElementUI整合编辑器vue-quill-editor

直接上代码：

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)

template:

...

<el-form-item label="详情" prop="content">
    <quill-editor 
        v-model="form.remark" 
        ref="myQuillEditor" 
        :options="editorOption" 
        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
    </quill-editor>
</el-form-item>

<div style="display:none;">
    <el-upload class="edit-uploader" :action="uploadPicUrl"
        :show-file-list="false"
        :headers="header"
        :on-success="editorUploadSuccess"
        :on-error="editorUploadError"
        :before-upload="beforeEditorUpload" >
            <i class="el-icon-plus avatar-uploader-icon" ref="aUpload"></i>
    </el-upload>
</div>


...   

<script>

export default {
    data() {
        return {
            editorOption: {
                modules: {
                    toolbar: {container:[
                    ['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] }],
                    [{ 'font': [] }],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'align': [] }],
                    ['clean'],
                    ['link', 'image']
                    ],
                    handlers: {
                        'image': function(value) {
                            if (value) {
                                document.querySelector('.edit-uploader input').click()
                            } else {
                                this.quill.format('image', false);
                            }
                            // this.$refs.aUpload.click() //自定义图片上传回调
                        }
                    }
                    },
                    syntax: {
                        highlight: text => hljs.highlightAuto(text).value
                    }
                },
                
            }
        }
    },
    methods: {
        onEditorReady(editor) { // 准备编辑器
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
        beforeEditorUpload() {
            // 显示loading动画
            this.quillUpdateImg = true
        },
        
        editorUploadSuccess(res, file) {
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill
            // 如果上传成功
            if (res.code === 0) {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片  res.info为服务器返回的图片地址
                quill.insertEmbed(length, 'image', res.data.filepath)
                // 调整光标到最后
                quill.setSelection(length + 1)
            } else {
                this.$message.error('图片插入失败')
            }
            // loading动画消失
            this.quillUpdateImg = false
        },
    
        // 富文本图片上传失败
        editorUploadError() {
            // loading动画消失
            this.quillUpdateImg = false
            this.$message.error('图片插入失败')
        }
    }
}
</script>

这里需要注意的是，编辑器默认使用base64上传，我们使用elementui的上传组件替换掉原来的图片上传。