<template>
  <div class="tinymce-editor">
    <editor v-model="myValue"
            :init="init"
    >
    </editor>
  </div>
</template>
<script>
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
// 编辑器插件plugins
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/link' // 链接
import 'tinymce/plugins/code' // 代码
import 'tinymce/plugins/table' // 表单
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/paste' // 张贴
import 'tinymce/plugins/autosave' // 自动保存
import 'tinymce/plugins/imagetools' // 图片
// Any plugins you want to use has to be imported
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/codesample'
import 'tinymce/plugins/emoticons'
import 'tinymce/plugins/fullscreen'
import 'tinymce/plugins/hr'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/media'
import 'tinymce/plugins/noneditable'
import 'tinymce/plugins/print'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/tabfocus'
import 'tinymce/plugins/template'
import 'tinymce/plugins/textpattern'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/bbcode'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/fullpage'
import 'tinymce/plugins/help'
import 'tinymce/plugins/image'
import 'tinymce/plugins/importcss'
import 'tinymce/plugins/legacyoutput'
import 'tinymce/plugins/nonbreaking'
import 'tinymce/plugins/pagebreak'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/save'
import 'tinymce/plugins/spellchecker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/toc'
import 'tinymce/plugins/visualchars'

// 自定义插件
import './plugin/letterspacing/plugin' // 字间距
import './plugin/indent/plugin' // 字间距
import './plugin/lineheight/plugin'
import { getToken } from '../../../utils/auth'
import axios from 'axios' // 行高

export default {
  components: {
    Editor
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    inline: {
      type: Boolean
    },
    /* 高度 */
    height: {
      type: Number,
      default: null
    },
    // 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
    // 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
    baseUrl: {
      type: String,
      default: '/admin/tinymce'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: Array,
      default() {
        return [
          'link  table   wordcount  autosave imagetools paste letterspacing indent lineheight',
          'advlist autolink link image lists charmap print hr anchor pagebreak',
          'searchreplace visualblocks visualchars code fullscreen media nonbreaking',
          'table directionality emoticons textcolor paste textcolor colorpicker textpattern'
        ]
      }
    },
    toolbar: {
      type: String,
      default: `undo redo | fontsizeselect bold italic underline strikethrough  | forecolor backcolor | alignleft aligncenter alignright alignjustify |
              | uploadimg image |  table lineheight   pastetext removeformat | customBtn letterspacing indent lineheight`
    }
  },
  data() {
    return {
      init: {
        language_url: `/admin/tinymce/langs/zh_CN.js`,
        language: 'zh_CN',
        skin_url: `/admin/tinymce/skins/ui/oxide`,
        content_css: `/admin/tinymce/skins/content/default/content.css`,
        base_url: this.baseUrl,
        height: 800,
        plugins: this.plugins,
        toolbar: this.toolbar,
        branding: false,
        selector: 'textarea',
        // menubar: false,
        fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 50px 56px 60px 64px',
        // 自定义字间距
        letterspacing_val: '1px 2px 3px 4px 5px',
        paste_data_images: true,
        relative_urls: false,
        remove_script_host: false,
        convert_urls: false,
        // setup: (editor) => {
        //   // 自定义新的工具栏按钮
        //   editor.ui.registry.addButton('customBtn', {
        //     tooltip: '新的工具栏按钮',
        //     text: '新的工具栏按钮',
        //     onAction: () => {
        //       window.alert('新的工具栏按钮')
        //     }
        //   })
        // },
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        // eslint-disable-next-line no-unused-vars
        // images_upload_handler: (blobInfo, success, failure) => {
        //
        //
        //   const img = 'data:image/jpeg;base64,' + blobInfo.base64()
        //   success(img)
        // },
        images_upload_handler: (blobInfo, success, failure) => {
          // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
          // success(img)

          let formData = new FormData()
          formData.append('file', blobInfo.blob())
          console.log(formData, blobInfo.blob())
          let configs = {
            headers: {
              'Content-Type': 'multipart/form-data',
              Authorization: getToken()
            }
          }
          axios.post(
            process.env.VUE_APP_BASE_API + '/sist/article/images',
            formData, configs).then(res => {
            console.log(res)
            success(res.data.data.href)
          })
        }
      },
      myValue: this.value,
      isShowFileDlg: false
    }
  },
  mounted() {
    tinymce.init({

      images_upload_handler: (blobInfo, success, failure) => {
        this.upload_handler(blobInfo, success, failure)
      }

    })
  },
  // created() {
  //   tinymce.init({})
  // },
  methods: {

    upload_handler(blobInfo, success, failure) {
      console.log('我被触发了')
      console.log(blobInfo, 'blobInfo')
      console.log(success, 'success')
      console.log(failure, 'failure')
      console.log(progress, 'progress')
      const img = 'data:image/jpeg;base64,' + blobInfo.base64()
      success(img)
      let forms = new FormData()
      let configs = {
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: getToken()
        }
      }
      forms.append('file', blobInfo.blob())

      axios.post(
        process.env.VUE_APP_BASE_API + '/sist/article/images',
        forms, configs).then(res => {
        console.log(res)

      })
      console.log(forms, 'forms')
    }

  },
  watch: {
    value(newValue) {
      this.myValue = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>
