vue组件: 富文本wangeditor

组件
<template>
    <div class="editor n_b_r">
        <!-- 类名为做一些基本的边框设置 -->
        <Toolbar
            class="toolbar-container"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            mode="default"
        />
        <!-- 高度外部页面可调,受制于插件,最小值为300px -->
        <!-- defaultConfig: 配置项 -->
        <!-- 方法 onCreated必须有, onChange可以没有,这里加是为了在外部页面取值-->
        <Editor
            :style="{ height }"
            class="editor-container"
            v-model="html"
            :defaultConfig="editorConfig"
            mode="default"
            @onCreated="onCreated"
            @onChange="onChange"
        />
    </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
// 接口
import { uploadFile } from "@/api/submitData";

export default {
    name: "editor-component",
    props: {
        // 初始值
        initHtml: String,
        // 是否只读
        readOnly: {
            type: Boolean,
            default: false,
        },
        // ........
        placeholder: {
            type: String,
            default: "请输入内容",
        },
        // 小于300px无效
        editorHeight: {
            type: String,
            default: "300px",
        },
    },
    data() {
        return {
            editor: null,
            toolbarConfig: {
                // excludeKeys文档里有讲到: 一般用于大部分默认功能都需要, 只有少部分功能不需要, 用这个来排除
                // 查看全部功能使用:  this.editor.getAllMenuKeys()
                excludeKeys: [
                    "todo",
                    "ondo",
                    "insertLink",
                    "insertTable",
                    "deleteTable",
                    "insertTableRow",
                    "deleteTableRow",
                    "insertTableCol",
                    "deleteTableCol",
                    "tableHeader",
                    "tableFullWidth",
                    "blockquote",
                    "fontFamily",
                    "code",
                    "codeBlock",
                    "codeSelectLang",
                    "numberedList",
                ],
            },
            html: "",
            // 语义化的不写注释了好累
            autoFocus: false,
            editorConfig: {
                autoFocus: this.autoFocus,
                placeholder: this.placeholder,
                readOnly: this.readOnly,

                MENU_CONF: {
                    uploadImage: {
                        maxFileSize: 1 * 1024 * 1024,
                        // 这个我理解的是上传文件个数..但我试了, 妹有用
                        maxNumberOfFiles: 4,
                        allowedFileTypes: [
                            "image/jpeg",
                            "image/jpg",
                            "image/png",
                            "image/svg",
                            "image/gif",
                            "image/webp",
                        ],
                        timeout: 6 * 1000,
                        // 自定义上传图片的方法
                        customUpload: (file, insertFn) => {
                            this.uploadImage(file, insertFn);
                        },
                    },
                    uploadVideo: {
                        maxNumberOfFiles: 1,
                        maxFileSize: 100 * 1024 * 1024,
                        allowedFileTypes: [
                            "video/mp4",
                            "video/3gp",
                            "video/m3u8",
                        ],
                        timeout: 6 * 1000,
                        customUpload: (file, insertFn) => {
                            this.uploadVideo(file, insertFn);
                        },
                    },
                },
            },
        };
    },
    computed: {
        // 限制editor高度
        height() {
            return parseInt(this.editorHeight) < 300
                ? "300px"
                : this.editorHeight;
        },
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor);
        },
        onChange() {
            // 输入框内值发生变化时需要向外传值
            this.$emit("change", this.html);
        },
        uploadImage(file, insertFn) {
            let formData = new FormData();
            formData.append("image", file);

            uploadFile(formData).then((res) => {
                 // 接口返回的路径----将图片插入页面
                 // insertFn是上面自定义上传的方法中传递的参数方法, 本身有仨参数
                 // url, alt, href
                insertFn(res.imageUrl, file.name, res.imageUrl); 
            });
        },
        uploadVideo(file, insertFn) {
            let formData = new FormData();
            formData.append("video", file);

            uploadFile(formData).then((res) => {
                insertFn(res.videoUrl, ""); // url, poster(视频封面)
            });
        },
    },
    components: { Editor, Toolbar },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy();
    },
    watch: {
        // 将外部页面赋的值传递到组件area中
       initHtml: {
            handler(value) {
              this.html = value;
              this.autoFocus = this.html === "";
            },
          immediate: true,
        },
    }
};
</script>

<style lang="scss" scoped>
// 这步必须有, 不然就塌了
@import "@wangeditor/editor/dist/css/style.css";

.editor {
    border: 1px solid #eee;
}
.editor-container {
    min-height: 300px;
    overflow-y: scroll;
}
.toolbar-container {
    border-bottom: 1px solid $border_color;
    border-top: 1px solid transparent;
}
</style>

//页面中使用
<template>
    <div class="">
        <el-button @click="getValue">取值</el-button>
        <editor
            :initHtml="initValue"
            placeholder="请输入"
            @change="editorChange"
        />
    </div>
</template>

<script>
import editor from "@/components/editor/editor.vue";

export default {
    name: "unic-page-name",
    components: { editor },
    methods: {
        getValue() {
            console.log("取值值", this.editorValue);
        },
        editorChange(value) {
            this.editorValue = value;
        },
    },
    data() {
        return {
            initValue: "",
            editorValue: "",
        };
    },
    mounted() {
        setTimeout(() => {
            this.initValue = "<div>我是初始值💃</div>"
            console.log(this.initValue,'initBalue')
        }, 4000)
    }
};
</script>