<template>
  <div class="tinymce-container editor-container">
    <textarea ref="text" :id="tinymceId" class="tinymce-textarea"/>
  </div>
</template>

<script>
import plugins from './plugins'
import toolbar from './toolbar'
import {putFileFun} from '../../api/resource/oss.js'

let id = 0

function getid() {
  return `tinymce${id++}`
}

export default {
  name: 'Tinymce',
  props: {
    height: {
      type: Number,
      required: false,
      default: 360
    },
    value:{type:String,default:""},
    visibleToolbar: {
      type: Boolean,
      required: false,
      default: true
    },
    visibleMenubar: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data() {
    return {
      ed:null,
      hasInit:false,
      tinymceId: getid(),
    }
  },
  mounted() {
    this.initTinymce()
  },
  deactivated() {
    this.destroyTinymce()
  },
  destroyed() {
    this.ed.off('blur')
    this.destroyTinymce()
  },
  methods: {
    initTinymce() {
      window.tinymce.init({
        selector: `#${this.tinymceId}`,
        language:'zh_CN',
        plugins: plugins,
        toolbar: this.visibleToolbar ? toolbar : false,
        menubar: this.visibleMenubar ? true : false,
        height: this.height,  //编辑器高度
        min_height: 400,
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
        extended_valid_elements:'script[src]',
        template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]',
        template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
        autosave_ask_before_unload: false,
        toolbar_mode : 'wrap',
        images_upload_base_path: '',
        images_upload_handler: function (blobInfo, succFun) {
          var file = blobInfo.file ? blobInfo.file : blobInfo.blob()
          putFileFun(file).then(e => {
            // console.log(e.data.msg)
            succFun(e.data.msg)
          })
        },
        setup:(ed) => {
          this.ed = ed
          ed.on("blur", () => {
            this.$emit('input',this.getContent())
          })
        }
      }).then(()=>{
        this.hasInit = true
        this.setContent(this.value)
      });
    },
    destroyTinymce() {
      if (window.tinymce.get(this.tinymceId)) {
         window.tinymce.get(this.tinymceId).destroy()
      }
    },
    setContent(value) {
      if (this.hasInit)
      {window.tinyMCE.get(this.tinymceId).setContent(value)}
    },
    getContent() {
      return window.tinymce.get(this.tinymceId).getContent()
    },
  },
  watch:{
    value(val){
      this.setContent(val)
    }
  }
}
</script>

<style scoped>
.tinymce-container {
  position: relative;
}
.tinymce-container>>>.mce-fullscreen {
  z-index: 10000;
}
.tinymce-textarea {
  visibility: hidden;
  z-index: -1;
}
.editor-custom-btn-container {
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 2005;
}
.fullscreen .editor-custom-btn-container {
  z-index: 10000;
  position: fixed;
}
.editor-upload-btn {
  display: inline-block;
}
</style>
