<!--
  @description: 招标=富文本编辑功能 所有界面使用的富文本编译器
  @author: 肖文龙
  @date：  2019-11-20 14:46:41
-->
<template>
  <div id="tinymceEditor" class="tinymce-editor">
    <Editor
      v-model="myValue"
      :init="init"
      :disabled="disabled"
      @onClick="onClick"
    />
  </div>
</template>

<script>
// 引入tinymce主件
import tinymce from 'tinymce/tinymce'
// 必须引入主体才能汉化和显示
import 'tinymce/themes/silver/theme'
// 引入tinymce-vue组件
import Editor from '@tinymce/tinymce-vue'
// 引入图片上传组件
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/link'
import 'tinymce/plugins/image'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/code'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/table'
import 'tinymce/plugins/paste'
import 'tinymce/icons/default/icons'
import { mapGetters } from 'vuex'
export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    editHeight: {
      type: Number,
      default: 0
    },
    triggerChange: {
      type: Boolean,
      default: false,
      required: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default:
        'advlist autolink lists link image charmap anchor searchreplace visualblocks fullscreen insertdatetime table paste'
    },
    toolbar: {
      type: [String, Array],
      default: 'undo redo | bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | link unlink image  | removeformat |imgUpLoade | fullscreen'
    },
    menubar: {
      type: [String, Array],
      default: 'edit insert view format table'
    }
  },
  data() {
    return {
      // 初始化配置
      init: {
        language_url: '/static/tinymce/langs/zh_CN.js', // 语言包
        skin_url: '/static/tinymce/skins/ui/oxide', // 主题
        language: 'zh_CN',
        height: 0,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        menubar: this.menubar,
        toolbar_drawer: true,
        statusbar: false,
        images_upload_handler: (blobInfo, success) => {
          const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          success(img)
        }
      },
      myValue: this.value
    }
  },
  computed: {
    /* contextPath 配置环境路径*/
    ...mapGetters(['contextPath'])
  },
  watch: {
    value(newValue) {
      this.myValue = (newValue == null ? '' : newValue)
    },
    myValue(newValue) {
      if (this.triggerChange) {
        this.$emit('change', newValue)
      } else {
        this.$emit('input', newValue)
      }
    }
  },
  created() {
    // 配置环境路径
    this.init.language_url = this.contextPath + this.init.language_url // 语言包
    this.init.skin_url = this.contextPath + this.init.skin_url // 主题
    const deviceHeight = document.documentElement.clientHeight - 342
    if (this.editHeight !== 0) {
      this.init.height = Number(this.editHeight)
    } else {
      this.init.height = deviceHeight
    }
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    }
  }
}

</script>
<style scoped>
</style>
