wangeditor：一个页面使用多个wangeditor编辑器，并对wangeditor进行组件封装以及上传图片到自己的服务器

wangeditor使用文档：https://www.kancloud.cn/wangfupeng/wangeditor3/332599
这里记录两个地方
1.如何在富文本编辑器中上传图片到自己的服务器
2.对富文本编辑器进行组件封装，并在一个页面使用多个编辑器
一、如何在富文本编辑器中上传图片到自己的服务器（只需要两步绝对可以解决问题）
①.首先，关闭网络上传接口

editor.config.showLinkImg = false;
1

②.完全的控制图片的上传过程，需要使用以下方法

// 自定义上传图片（根据服务端要求，我这里需要把文件流转换成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)

                        })
                    }

                }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

二、组件封装以及一个页面使用多个富文本编辑器
①、我们知道获取编辑器对象是通过ref来获取的,所以在父组件中使用子组件的时候。需要动态的把ref传递到子组件。

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

②、父传子
父组件：

<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>

1
2
3
4
5
6
7
8
9
10

子组件：

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

子组件用props接收后，在mounted钩子中获取wangeditor对象。调取自定义的上传接口，进行图片上传，并插入图片到编辑器中。
③、监听数据变化，给editor对象上添加value属性，并把当前值绑定上去。

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

④、在父组件中就可以拿到了

当点击提交时，通过refs获取子组件的vue对象，就能拿到我们刚刚绑定的值了，我这里一个页面使用了三个富文本组件。

 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)
        },
1
2
3
4
5

⑤、拿到所有的值了，就可以定义字段给服务端传参了。