<template>
    <div id="desiredEffect"></div>
</template>

<script>
import E from 'wangeditor'
var phoneEditor, _this
export default {
  components: {},
  props: {
    desiredEffectVal: {
      type: String,
      required: false
    }
  },
  data () {
    return {}
  },
  created () {},
  mounted () {
    _this = this
    phoneEditor = new E('desiredEffect')
    phoneEditor.onchange = function () {
      _this.$emit('desiredEffect', this.$txt.html())
    }

    phoneEditor.create()
    // phoneEditor.$txt.html(this.val)
  },
  methods: {},
  computed: {},
  watch: {
    desiredEffectVal (val) {
      // console.log(val)
      phoneEditor.$txt.html(_this.desiredEffectVal)
    }
  }
}
</script>

<style lang="scss" scoped>
#desiredEffect {
  width: 100%;
  height: 250px;
}
</style>
