<template>
  <div class="tinymce">
    <Editor v-model="myValue" :init="init" :disabled="disabled"></Editor>
  </div>
</template>

<script>
  import {
    uploads
  } from '@/api/uploads.js'
  import tinymce from "tinymce/tinymce";
  import Editor from "@tinymce/tinymce-vue";
  import "/public/tinymce/skins/skin.css";
  import "/public/tinymce/langs/zh_CN";
  import "tinymce/themes/silver/theme";
  import "tinymce/plugins/media";
  import "tinymce/plugins/lists";
  import "tinymce/plugins/table";
  import "tinymce/plugins/hr";
  import "tinymce/plugins/autolink";
  import "tinymce/plugins/help";
  import "tinymce/plugins/visualblocks";
  import "tinymce/plugins/fullscreen";
  import "tinymce/plugins/textpattern";
  import "tinymce/plugins/contextmenu";
  import "tinymce/plugins/wordcount";
  import "tinymce/plugins/colorpicker";
  import "tinymce/plugins/textcolor";
  import "tinymce/icons/default"
  import 'tinymce/plugins/code'
  import "tinymce/plugins/image"
  import "tinymce/plugins/imagetools"
  import "/public/tinymce/plugins/axupimgs/plugin.js"
  export default {
    components: {
      Editor
    },
    props: {
      height: {
        type: Number,
        default: 300,
      },
      value: {
        type: String,
        default: "",
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      plugins: {
        type: [String, Array],
        default: "code image axupimgs paste preview searchreplace autolink directionality visualblocks visualchars fullscreen template codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave ",
      },
      toolbar: {
        type: [String, Array],
        default: ` undo redo restoredraft | code | image | axupimgs | imagetools | assignment | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough  anchor | alignleft aligncenter alignright alignjustify outdent indent |
                styleselect formatselect fontselect fontsizeselect | table charmap emoticons hr pagebreak | bullist numlist | blockquote subscript superscript removeformat |
                 insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter`,
      },
      menubar: {
        type: String,
        default: "edit insert view format table CardBtn",
      },
    },
    data() {
      return {
        myValue: this.value,
        showImg: false,
        imgUploadUrl: `${process.env.VUE_APP_UPLOAD_API}`,
        init: {
          language_url: "/public/tinymce/langs/zh_CN.js", // 这里需要单独处理
          language: "zh_CN",
          height: this.height,
          plugins: this.plugins,
          fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 28px 36px",
          toolbar: this.toolbar,
          branding: false,
          menubar: this.menubar,
          // 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
          images_upload_url: this.imgUploadUrl,
          images_upload_handler: (blobInfo, success, failure) => {
            this.handleImgUpload(blobInfo, success, failure);
          },
        },
      };
    },
    methods: {
      handleImgUpload(blobInfo, success, failure) {
        console.log("我要上传", blobInfo);
        let self = this;
        let file = blobInfo.blob();
        const isLt2M = file.size / 1024 < 2048;
        if (!isLt2M) {
          failure("上传失败，图片不可超过2M!");
          return false;
        }
        let formdate = new FormData();
        formdate.append("file", blobInfo.blob()); //imageFile文件名和后端统一
        uploads(formdate).then(res => {
          if (res) {
            let url = res.url;
            success(url); //回显url
          } else {
            failure(res.errmsg);
            this.$message.error(res.errmsg);
          }
        })
      }
    },
    computed: {},
    mounted() {
      tinymce.init({});
    },
    watch: {
      value(newValue) {
        this.myValue = newValue;
      },
      myValue(newValue) {
        this.$emit("input", newValue);
      },
    },
  };
</script>

<style scoped lang="scss">
  .tinymce {
    position: relative;

    &__upload {
      z-index: 2;
      position: absolute;
      right: 4px;
      top: 0px;
    }

    ::v-deep .tox.tox-tinymce.tox-fullscreen {
      z-index: 0
    }
  }
</style>
