<template>
    <div v-loading="loading" element-loading-text="拼命加载中">
        <div id="toolbar-container" v-show="false"></div>
        <div id="text-container"></div>
    </div>
</template>

<script>
// 引入 wangEditor
import wangEditor from "wangeditor";

export default {
    name: "wangEditorExDisplay",
    props: {
        //  编辑器内容文本
        contentText: {
            type: String,
            default: "",
        },
        // 编辑器编辑区域的高度
        height: {
            type: Number,
            default: 300,
        },
    },
    data() {
        return {
            loading: false,
            editor: null,
            editorData: "",
        };
    },
    watch: {
        contentText(val, oldVal) {
            // 普通的watch监听
            // 设置编辑器初始化文本
            this.editor.txt.html(val);
        },
    },
    mounted() {
        // 菜单和编辑区域分离，传入两个元素
        // eslint-disable-next-line new-cap
        const editor = new wangEditor("#toolbar-container", "#text-container");

        // 设置编辑区域高度为 500px
        editor.config.height = this.height;

        // 显示菜单
        editor.config.menus = [];

        // 创建编辑器
        editor.create();
        this.editor = editor;

        // 设置编辑器初始化文本
        editor.txt.html(this.contentText);

        // 禁止编辑
        editor.disable();
    },
    methods: {
        /**
         * 获取编辑器内容
         */
        getEditorData() {
            // 通过代码获取编辑器内容
            return this.editor.txt.html();
        },
    },
    beforeDestroy() {
        // 调用销毁 API 对当前编辑器实例进行销毁
        this.editor.destroy();
        this.editor = null;
    },
};
</script>
