<template>
  <div class="edit-page">
    <vue-ueditor-wrap ref="editor" @beforeInit="addCustomDialog" v-model="contentText" :config="config" ></vue-ueditor-wrap>
  </div>
</template>
<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
export default {
  name: 'vueEditor',
  props: {
    value: {
      type: String
    },
    config: {
      type: Object,
      default: () => {
        return {  }
      }
    }
  },
  data() {
    return {
      contentText: this.value
    }
  },
  watch: {
    //监听prop传的value，如果父级有变化了，将子组件的myValue也跟着变，达到父变子变的效果
    value(newVal) {
      this.contentText = newVal
    },
    contentText(newVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    addCustomDialog() {
      window.UE.registerUI('test-dialog', function (editor, uiName){
        // 创建 dialog
        let dialog = new window.UE.ui.Dialog({
          iframeUrl: './static/UEditor/xiumi-ue-dialog-v5.html',
          editor: editor,
          name: uiName,
          // dialog 的标题
          title: '这是一个自定义的 Dialog 浮层',
          // 指定 dialog 的外围样式
          cssRules: 'width:1000px;height:600px;'
        })
        // 自定义按钮
        var btn = new window.UE.ui.Button({
          name: 'dialog-button',
          title: '秀米',
          cssRules: `background-image: url('./static/xiumi.png') !important;background-size: cover;`,
          onclick: function () {
            // 渲染dialog
            dialog.render()
            dialog.open()
          }
        })
        return btn
      }, 0)
    }
  },
  components: {
    VueUeditorWrap
  },
  mounted() {
    
  }
}
</script>