wangeditor: A page uses multiple wangeditor editors, and encapsulates wangeditor components and uploads pictures to its own server

Wangeditor usage documentation: https://www.kancloud.cn/wangfupeng/wangeditor3/332599
Here are two places to record
1. How to upload pictures to your own server in the rich text editor
2. Encapsulate the components of the rich text editor, And use multiple editors on one page
1. How to upload pictures to your own server in the rich text editor (only two steps can definitely solve the problem)
①. First, close the network upload interface

editor.config.showLinkImg = false;

②. To fully control the upload process of pictures, the following methods need to be used

// 自定义上传图片（根据服务端要求，我这里需要把文件流转换成base64格式，这个地方按照自己的接口要求调取接口就可以。）
                editor.config.customUploadImg = async (
                    files,
                    insertImgFn
                ) => {
                    // 调接口上传图片
                    let reader = new FileReader();
                    reader.readAsDataURL(files[0]);
                    reader.onload = function (e) {
                        console.log(e, 'e-------------------')
                        let base64String = e.target.result;
                        // 此处可对该base64进行获取赋值传入后端
                        console.log("bese64编码：", base64String);
                        imguploading1001({
                            breakdownId: '2c90a7247f6c936801815adac7600143',//故障id
                            imageType: '1',
                            imageBase64: base64String
                        }).then((res) => {
                            console.log(res.data.reportedImage, 'res==>> img upload')
                            this.bdimgurl = res.data.reportedImage.imageUrl
                            insertImgFn(this.bdimgurl)

                        })
                    }

                }

2. Component encapsulation and using multiple rich text editors on one page
① We know that the editor object is obtained through ref, so when using child components in the parent component. Need to dynamically pass ref to subcomponents.

let editor = new wangEdit(this.$refs.ref1);

②, father to son
parent component:

<template>
    <div>
        <button type="button" @click="submit">提交</button>
        <div>
            <Edit :refmsg="ref1" ref="ref1"></Edit>
            <Edit :refmsg="ref2" ref="ref2"></Edit>
            <Edit :refmsg="ref3" ref="ref3"></Edit>
        </div>
    </div>

Subassembly:

<template>
    <div style="width: 100%;height: 500px">
        <div class="mo-wang-editor" :ref="refmsg" ></div>
    </div>
</template>

After the subcomponent is received with props, get the wangeditor object in the mounted hook. Call the custom upload interface, upload the image, and insert the image into the editor.
③. Monitor data changes, add a value attribute to the editor object, and bind the current value to it.

//监听数据变化
            editor.config.onchange = (newHtml) => {
                this.$emit('change', newHtml);
                editor.config.value = newHtml
            };

④. You can get it in the parent component

. When clicking submit, get the vue object of the child component through refs, and you can get the value we just bound. I use three rich text components on one page here.

 submit() {
            console.log(this.$refs.ref1.editor.config.value)
            console.log(this.$refs.ref2.editor.config.value)
            console.log(this.$refs.ref3.editor.config.value)
        },

⑤. After getting all the values, you can define fields to pass parameters to the server.