<template>
    <el-form-item :label="label" :rules="requireRule(required, label)" :prop="prop">
        <div :id="id"/>
    </el-form-item>
</template>

<script>
import E from 'wangeditor'
import mixin from './mixin'

export default {
    name: 'Editor',
    mixins: [mixin],
    data() {
        return {
            id: `${this.prop}`,
            editor: null
        }
    },
    mounted(){
        this.editor = new E(`#${this.id}`)
        this.$watch(() => this.$parent.model[this.prop], value => this.editor.txt.html(value), {immediate: true})
        this.editor.config.onchange = newHtml => {
            this.$parent.model[this.prop] = newHtml
        }
        this.editor.create()
    }
}
</script>

<style>
/* 防止覆盖弹窗 */
.w-e-toolbar {
  z-index: 2!important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}

</style>