<template>
  <div>
    <p style="color: red;">建议上传[宽*高]不超过[794px*1123px]的图片</p>
    <div style="width: 100%;">
      <Editor v-model="html" :init="init" :toolbar="toolbar" :plugins="plugins"
              :disabled="disabled" :placeholder="placeholder"/>
    </div>
  </div>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'tinymce/models/dom'
// 引入编辑器插件
import 'tinymce/plugins/code' // 编辑源码
import 'tinymce/plugins/image' // 插入编辑图片
import 'tinymce/plugins/link' // 超链接
import 'tinymce/plugins/preview' // 预览
import 'tinymce/plugins/table' // 表格
import 'tinymce/plugins/lists' // 列表编号
import 'tinymce/plugins/advlist' //高级列表编号
import request from "@/utils/request";

let type = ''
let filePrefix = ''
let uploadUrl = ''


export default {
  components: {
    Editor
  },
  name: "cusEditor",
  props: {
    content: {
      type: String,
      required: true
    },
    type: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      uploadUrl: '',
      toolbar: "undo redo | preview image forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
        alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \
        table  | code selectall",
      plugins: "code image link preview table lists advlist",
      placeholder: "请输入...",
      disabled: false,
      editor: null,
      init: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide',
        content_css: '/tinymce/skins/content/default/content.css',
        menubar: false,
        statusbar: true,
        plugins: this.plugins,
        toolbar: this.toolbar,
        fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px',
        height: this.height || '500',
        placeholder: this.placeholder,
        branding: false,
        resize: true,
        elementpath: true,
        content_style: '',
        images_upload_handler(blobInfo, progress) {
          // return new Promise((resolve, reject) => {
          //   return resolve("data:image/*;base64," + blobInfo.base64())
          // })
          return new Promise((resolve, reject) => {

            let param = new FormData(); //创建form对象
            param.append('file', blobInfo.blob(), blobInfo.filename());//通过append向form对象添加数据
            param.append("type", type);
            let config = {
              headers: {
                "Content-Type": 'multipart/form-data',
              }
            }; //添加请求头
            request.post(uploadUrl, param, config)
              .then((res) => {
                if (res.code === 20000) {
                  return resolve(res.data.name)
                } else {
                  return reject('err:' + res.message)
                }
              }).catch((err) => {
              return reject('err:' + err)
            })
          })
        },
        setup: (editor) => {
          this.editor = editor
          editor.on('init', function () {
            this.getBody().style.fontSize = '14px'
          })
        }
      },
      html: this.content,
    }
  },
  mounted() {
    tinymce.init(this.init)
  },
  created() {
    type = this.type

    // this.$imageHost().then(res => {
    //   filePrefix = res
    // })
    uploadUrl = process.env.VUE_APP_BASE_API + "/udiwms/upload/register/file";
    if (this.content) {
      this.html = this.content
    }
  },
  beforeDestroy() {
    this.editor.destroy();
  },
  methods: {}
}
</script>

