基于vue3的iview实现quill-editor结合upload组件实现图片上传

背景：因为quill-editor实现的图片上传是压缩成base64编码，导致存入数据库会非常大，取出来的时候也会延迟，所以比较理想的方式是变更quill-editor的上传文件的功能，让upload组件实现上传，然后再uploadSuccess方法中得到上传后的文件地址并插入到quill-editor编辑器中。

目录：

一、安装quill-editor

二、配置并显示quill-editor

三、实现upload组件与quill-editor的结合

步骤：

一、安装quill-editor

npm install vue-quill-editor --save

二、配置并显示quill-editor

1.配置工具栏 2.重写上传图片的实现

<script>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';

//自定义quill-editor工具栏，默认上传图片的图标是不显示的
const toolbarOptions = [
    ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
    ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
    [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
    [{ 'header': 1 }, { 'header': 2 }],
    [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
    [{ indent: "-1" }, { indent: "+1" }],
    [{ size: ['small', false, 'large', 'huge']}], // 配置字号
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
    [{ font: []}], //显示字体选择
    [{ align: [] }], // 对齐方式-----
    ["clean"], // 清除文本格式-----
    ['link', 'image'], // 链接、图片、视频-----
];
//事件重写
const handlers = {
    //重写图片上传
    image:function image(value) {
        if (value) {
            document.querySelector('.avatar-uploader input').click();
        } else {
            this.quill.format('image', false);
        }
    }
};
//并在components包含QuillEditor组件
export default {
        components:{
            vLoading,
            QuillEditor,
        },
        data () {
            return {
                mode: false,
                title: '',
                url:{
                    upload1 : base_url+'/tool/upload_pic/?image=image1&token='+token,
                },
                editorOption: {
                    theme: "snow",
                    modules: {
                        toolbar: {
                            container: toolbarOptions //工具栏,
                            handlers: handlers //重写方法,
                        },
                    },
                },
                loading_mask:false,
                loading:false,
                form:{
                    desc:'',
                    tool_sn:'',
                    title:'',
                },
                params:{
                },
                outside_pic:{
                    defaultList: [],
                    imgName: '',
                    imgPath:'',
                    visible: false,
                    uploadList: [],
                },
                
                
            }
        },

<div style="height:0px;overflow:hidden;">
<!--upload组件用于上传图片，默认设置隐藏-->
<Upload
    ref="outside_upload"
    :show-upload-list="false"
    :on-success="outsideHandleSuccess"
    :format="['jpg','jpeg','png']"
    :max-size="2048"
    :on-format-error="outsideHandleFormatError"
    :on-exceeded-size="outsideHandleMaxSize"
    :before-upload="outsideHandleBeforeUpload"
    multiple
    type="drag"
    class="avatar-uploader"
    name="image1"
    :action="url.upload1"
    style="display: inline-block;width:58px;">
    <div style="width: 58px;height:58px;line-height: 58px;">
        <Icon type="ios-camera" size="20"></Icon>
    </div>
</Upload>
</div>
<FormItem label="描述：">
    <quill-editor theme="snow" :options="editorOption" v-model="form.desc" ref="editorRef" class="editor"></quill-editor>
</FormItem>

然后就可以看到如下效果：

三、实现upload组件与quill-editor的结合

在upload组件的上传成功回调函数中实现图片插入到quill-editor中

outsideHandleSuccess (res, file) {
        var message = this.$Message;
        if (res.success == 'false') {
            message.error(res.m);
            return false;
        }
        //file.name = res.d.info.name;
        //file.url = res.d.info.savename;

        let quill = this.$refs.editorRef.getQuill();
        length = 0;
        if (quill.getSelection() != null) {
            length = quill.getSelection().index;
        }
        //插入图片
        quill.insertEmbed(length, 'image', res.d.info.savename);
        quill.setSelection(length+1);
    },

最后的上传图片后的效果：

其他知识点：

获取quill-editor中的内容：
this.$refs.editorRef.getHTML()

初始化quill-editor中的内容
var html="<p>插入到编辑器中的内容</p>";
let quill = this.$refs.editorRef.getQuill();
this.$refs.editorRef.setHTML(html);