<template>
  <!-- <div style="width:100%;height:100%">{{content}}</div> -->
  <Editor v-model="content" 
          :init="setting" ref="editor"
          :disabled="$parent.type==='show'" 
          v-if="afterMounted"
  ></Editor>
</template>

<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
//样式
import "tinymce/skins/content/default/content.min.css";
import "tinymce/skins/ui/oxide/skin.min.css";

//主题
import "tinymce/themes/silver";

//插件
import "tinymce/plugins/link"; //链接插件
/* import "tinymce/plugins/image"; */ //图片插件
/* import "tinymce/plugins/media"; */ //媒体插件
/* import "tinymce/plugins/table";  */ //表格插件
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/quickbars"; //快速栏插件
import "tinymce/plugins/fullscreen"; //全屏插件
import "tinymce/plugins/paste"; //黏贴插件
import "tinymce/icons/default/icons";
export default {
  components: {
    Editor,
  },
  props: {
    dom: {
      type: String,
      default: "#word-full-right",
    },
    position: {
      type: Number,
      default: 2,
    }
  },
  data() {
    return {
      content: "",
      setting: {
        language: "zh_CN",
        language_url: require("../utils/zh_CN.js"),
        menubar: false,
        toolbar: [
          "indent outdent alignleft aligncenter alignright alignjustify forecolor",
          "bold italic underline strikethrough numlist bullist backcolor",
          "fontselect fontsizeselect",
        ],
        /* toolbar_drawer: "sliding", */
        /* quickbars_selection_toolbar:
          "bold italic underline strikethrough forecolor backcolor | fontselect fontsizeselect ", */
        quickbars_selection_toolbar:false,  
        quickbars_insert_toolbar: false,
        plugins: "lists quickbars paste",
        height: 350,
        inline: true,
        selector: this.dom,
        paste_as_text: true,
        fontsize_formats:'12px 14px 16px 18px 20px 22px 24px 36px 48px',
        font_formats:`微软雅黑='微软雅黑';宋体='宋体';黑体='黑体';仿宋='仿宋';
                      楷体='楷体';隶书='隶书';幼圆='幼圆';Andale Mono=andale mono,times;
                      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;
                      Webdings=webdings;Wingdings=wingdings`,
        //将toolbar放到指定div上
        fixed_toolbar_container: ".richtext-tool",
        //需要从node_modules/tinymce/skins/ui/oxide/复制 skin.min.css和content.inline.min.css到指定目录下
        //这样就不报错了
        skin_url: "/static/css",//会发送http请求,/static/css->localhost:8080/static/css/skin.min.css
        content_url: "/static/css",
        /* auto_focus:true */
        placeholder:"点击输入文本内容"
      },
      initFlag: false,
      afterMounted:false
    };
  },
  watch: {
    content(con) {
      const { elementId } = this.$refs.editor;
      if (this.initFlag) {
        //不会触发contentWatch但是会改变getContent
        tinymce.editors[elementId].setContent(con);
        this.initFlag = false;
      }
      let richContent = tinymce.editors[elementId].getContent();
      let val = tinymce.editors[elementId].getContent({ format: "text" });
      /* if (con !== "") { }*/
        this.$emit("getText", { val, richContent });
    },
  },
  methods: {
    initTiny() {
      /* tinymce.init({}); */
      const { elements } = this.$parent.pageItem;
      const el = elements.find((i) => i.position === this.position);
      if (el) {
        this.content = el.richContent;
        this.initFlag = true;
      }
    },
    destoryTiny() {
      const { elementId } = this.$refs.editor;
      tinymce.editors[elementId].destroy();
    },
    getFocus(){
      const { elementId } = this.$refs.editor;
      tinymce.editors[elementId].show()
      tinymce.editors[elementId].focus()
      console.log(tinymce.editors[elementId])
    },
    handleBlur(){
      const { elementId } = this.$refs.editor;
      //tinymce.editors[elementId].hide()
      //console.log(tinymce.editors[elementId].targetElm)
    },
    getSetting(){
      if(this.$parent.pageItem.id===this.$parent.choosedId&&!this.$parent.pageItem.isLoadText&&!this.$parent.isEditLayer)
        return{...this.setting,...{auto_focus:true}}
      else
        return this.setting
    }
  },
  mounted() {
      console.log('init')
      this.afterMounted = true
    /* if(this.$parent.pageItem.id===this.$parent.choosedId){
    } */
  },
};
</script>

<style lang="scss">
.mce-content-body {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
  &:focus-visible{
    outline: 0;
  }
  ul{
    margin-left: 1em;
    list-style-type: disc;
  }
  ol{
    margin-left: 1em;
    list-style-type: decimal;
  }
}
.mce-edit-focus{
  outline: 0;
}
.tox .tox-tbtn--bespoke .tox-tbtn__select-label{
  width:4.5em !important;
}
.tox .tox-tbtn{
  width:32px;
}
.tox-menu.tox-swatches-menu.tox-selected-menu{
  left:185px !important;
}
.mce-content-body:not([dir=rtl])[data-mce-placeholder]:not(.mce-visualblocks)::before {
  left:10px !important;
}
</style>