wangeditor: 페이지는 여러 wangeditor 편집기를 사용하고 wangeditor 구성 요소를 캡슐화하고 자체 서버에 사진을 업로드합니다.

Wangeditor 사용 설명서: https://www.kancloud.cn/wangfupeng/wangeditor3/332599
여기에 기록할 두 곳이 있습니다
. 1. 서식 있는 텍스트 편집기에서 자신의 서버에 사진을 업로드하는 방법
2. 서식 있는 텍스트 편집기를 구성 요소로 캡슐화 그리고 한 페이지에 여러 편집기 사용하기
1. 리치 텍스트 편집기에서 자신의 서버에 사진을 업로드하는 방법(두 단계만이 문제를 확실히 해결할 수 있음)
① 먼저 네트워크 업로드 인터페이스를 닫습니다.

editor.config.showLinkImg = false;

② 사진 업로드 과정을 완전히 제어하려면 다음과 같은 방법을 사용해야 합니다.

// 自定义上传图片（根据服务端要求，我这里需要把文件流转换成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 및 한 페이지에서 다수의 Rich Text Editor 사용
① 에디터 객체는 ref를 통해 얻어지는 것으로 알고 있으므로, 부모 컴포넌트에서 자식 컴포넌트를 사용할 때. ref를 하위 구성 요소에 동적으로 전달해야 합니다.

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

② 아버지와 아들
부모 구성 요소:

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

서브어셈블리:

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

소품으로 하위 구성 요소를 받은 후 마운트된 후크에서 wangeditor 개체를 가져옵니다. 사용자 지정 업로드 인터페이스를 호출하고 이미지를 업로드한 다음 편집기에 이미지를 삽입합니다.
③ 데이터 변화를 모니터링하고, 에디터 객체에 값 속성을 추가하고, 현재 값을 바인딩합니다.

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

④.부모컴포넌트에서 얻을 수 있다

.submit 클릭 시 refs를 통해 자식컴포넌트의 vue객체를 가져오면 방금 묶은 값을 얻을 수 있다.여기서는 한 페이지에 3개의 리치텍스트컴포넌트를 사용한다.

 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)
        },

⑤ 모든 값을 가져온 후 서버에 매개변수를 전달할 필드를 정의할 수 있습니다.