<template>
  <div>
    <!--
    给editor加key是因为给tinymce keep-alive以后组件切换时tinymce编辑器会显示异常，
    在activated钩子里改变key的值可以让编辑器重新创建v-model="content" @show="editors"v-models="content"
    -->
    <editor id="tinymceEditor" :init="tinymceInit" v-model="content" :key="tinymceFlag"/>
    <!-- <el-upload multiple ref="imageUpload" :action="publicPath" :on-success="insertImage" style="display:none"></el-upload> -->
  </div>
</template>
<script>

// import tinymce from '../../../static/tinymce/tinymce.js'
import '../../../static/tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import request from '@/utils/uploadImage'
// import axios from 'axios'

import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/paste'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/print'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/visualchars'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
// import '../../../static/tinymce/plugins/media'
import 'tinymce/plugins/media'
import 'tinymce/plugins/template'
import 'tinymce/plugins/code'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/imagetools'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/help'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/autosave'
// import 'tinymce/plugins/bdmap'
// import 'tinymce/plugins/indent2em'
import 'tinymce/plugins/autoresize'

// import 'tinymce/plugins/lineheight'
// import 'tinymce/plugins/formatpainter'../../../static/tinymce/skins/ui/oxide
import '../../../static/tinymce/plugins/axupimgs'

// import 'tinymce/plugins/axupimgs'
// import 'tinymce/plugins/autosave'

export default {
  name: 'TinymceEditor',
  components: {
    editor: Editor
  },
  props: [
    'content'
  ],
  data() {
    return {
      publicPath: process.env.BASE_API + 'uploadimage',
      tinymceFlag: 1,
      tinymceInit: {},
      contents: this.content
      // contents:''
    }
  },
  watch: {

    content(newV, oldV) {
      this.$emit('fun', newV)
      // tinymce.activeEditor.setContent(newV);
    }
  },
  mounted() {
    const that = this

    this.contents = that.content
  },
  created() {
    // this.value = this.content
    // const that = this

    this.tinymceInit = {
      // skin_url: `../../../static/tinymce/skins/ui/oxide`,
      // content_css: `../../../static/tinymce/skins/content/default/content.css`,
      // language_url: `../../../static/tinymce/langs/zh_CN.js`,
      skin_url: `../../../admin/static/tinymce/skins/ui/oxide`,
      content_css: `../../../admin/static/tinymce/skins/content/default/content.css`,
      language_url: `../../../admin/static/tinymce/langs/zh_CN.js`,
      language: 'zh_CN',
      height: 650, // 编辑器高度
      min_height: 400,
      browser_spellcheck: true, // 拼写检查
      branding: false, // 去水印
      // elementpath: false,  //禁用编辑器底部的状态栏
      statusbar: false, // 隐藏编辑器底部的状态栏
      paste_data_images: true, // 允许粘贴图像

      // images_upload_url: this.publicPath,
      // menubar: false, // 隐藏最上方menu | bdmap indent2em lineheight formatpainter axupimgs alignjustify outdent indent restoredraft
      plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave  autoresize axupimgs',
      toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough image link imageUpload anchor | alignleft aligncenter alignright  | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen axupimgs',

      // file_picker_types: 'media',

      // file_picker_callback: function (blobInfo, value, meta) {
      //   console.log(meta, 'meta')
      //   console.log(value, 'meta')
      //   console.log(blobInfo, 'meta')
      //   if (meta.filetype == 'media') {
      //     //创建一个隐藏的type=file的文件选择input
      //     let input = document.createElement('input');
      //     input.setAttribute('type', 'file');
      //     input.onchange = function () {
      //       // let file = this.files[0];//只选取第一个文件。如果要选取全部，后面注意做修改
      //       // let xhr, formData;
      //       // xhr = new XMLHttpRequest();
      //       // xhr.open('POST', self.apiUrl);
      //       // xhr.withCredentials = self.credentials;
      //       // xhr.upload.onprogress = function (e) {
      //       //   // 进度(e.loaded / e.total * 100)
      //       };

      //       let fm = new FormData()
      //     }
      // fm.append('uploadFiles',  blobInfo.blob())
      // request({
      //   url: '/uploadVideo',
      //   method: 'post',
      //   data: fm
      // }).then((data) => {

      // }).catch((err) => {
      //   console.log(err, 'err')

      // })
      // },

      images_upload_handler: function(blobInfo, succFun, failFun) {
        const fm = new FormData()
        fm.append('uploadFiles', blobInfo.blob())
        request({
          url: '/uploadimage',
          method: 'post',
          data: fm
        }).then((data) => {
          const url = data.data.data[0]
          succFun(url)
        }).catch((err) => {
          console.log(err, 'err')
          failFun(err)
        })
      }
    }
    // this.getContents()
  },
  activated() {
    this.tinymceFlag++
  },
  methods: {
    // 插入图片至编辑器
    getContent() {
      return this.content
    },
    getContents() {
      this.contents = this.content
    },

    editors(content) {
      this.$emit('success', '子组件修改了')
    }

  }
}
</script>
