<template>
  <div v-loading="loading">
    <textarea :id= "Id"></textarea>
  </div>
</template>
<script>
  export default {
    data () {
      const Id = Date.now()
  
      return {
        loading: true,
        Id: Id,
        Selector: `#${Id}`,
        Editor: null,
        DefaultConfig: {
          // GLOBAL
          height: 500,
          theme: 'modern',
          menubar: false,
          toolbar: 'styleselect | fontselect | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | image  media | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | preview removeformat  hr | paste code  link | undo redo | fullscreen ',
          plugins: `
            paste
            importcss
            image
            code
            table
            advlist
            fullscreen
            link
            media
            lists
            textcolor
            colorpicker
            hr
            preview
          `,
          // CONFIG
          forced_root_block: 'p',
          importcss_append: true,
          content_style: `
            *                         { padding:0; margin:0; }
            html, body                { height:100%; }
            img                       { max-width:100%; display:block;height:auto; }
            a                         { text-decoration: none; }
            iframe                    { width: 100%; }
            p                         { line-height:1.6; margin: 0px; }
            table                     { word-wrap:break-word;word-break:break-all; max-width:100%;important;border:none;border-color:#999; }
            .mce-object-iframe        { width:100%;box-sizing:border-box;margin:0;padding:0; }
            ul,ol                     { list-style-position:inside; }
          `,
          insert_button_items: 'image link | inserttable',

          // valid_elements: '*[*]', // 不能加回 否则换行失效

          // Paste
          paste_retain_style_properties: 'all',
          paste_word_valid_elements: '*[*]',
          paste_data_images: true,
          paste_convert_word_fake_lists: false, // 插入word文档需要该属性
          paste_webkit_styles: 'all',
          paste_merge_formats: true,
          nonbreaking_force_tab: false,
          paste_auto_cleanup_on_paste: false,
          // Font
          fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px',

          // StyleSelect
          style_formats: [
            {
              title: '首行缩进',
              block: 'p',
              styles: { 'text-indent': '2em' }
            },
            {
              title: '行高',
              items: [
                {title: '1', styles: { 'line-height': '1' }, inline: 'span'},
                {title: '1.5', styles: { 'line-height': '1.5' }, inline: 'span'},
                {title: '2', styles: { 'line-height': '2' }, inline: 'span'},
                {title: '2.5', styles: { 'line-height': '2.5' }, inline: 'span'},
                {title: '3', styles: { 'line-height': '3' }, inline: 'span'}
              ]
            }
          ],
          // removeformat: [
          //   {selector: '*', attributes: ['style', 'class'], remove: true, split: false, expand: false, deep: true}
          // ],
          // FontSelect
          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;
            Symbol=symbol;
            Tahoma=tahoma,arial,helvetica,sans-serif;
            Terminal=terminal,monaco;
            Times New Roman=times new roman,times;
            Trebuchet MS=trebuchet ms,geneva;
            Verdana=verdana,geneva;
            Webdings=webdings;
            Wingdings=wingdings,zapf dingbats`,

          // Tab
          tabfocus_elements: ':prev,:next',
          object_resizing: true,

          // Image
          imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
          images_upload_url: 'https://api.medmeeting.com',
          images_upload_base_path: '/v1/files',
          images_upload_credentials: 'false',
          images_upload_handler: function (blobInfo, success, failure) {
            function uploadPic () {
              const xhr = new XMLHttpRequest()
              const formData = new FormData()
  
              xhr.withCredentials = false
              xhr.open('POST', 'https://api.medmeeting.com/v1/files')
              xhr.onload = function () {
                var json
  
                if (xhr.status !== 200) {
                  failure('上传失败: ' + xhr.status)
                  return
                }
                json = JSON.parse(xhr.responseText)
                if (!json || json.status === 'error') {
                  failure('上传失败: ' + xhr.responseText.msg)
                  return
                }
                success(json.extra.absQiniuImgHash)
              }
              formData.append('file', blobInfo.blob())
              xhr.send(formData)
            }
  
            if (blobInfo.blob().size > 1024 * 1024 * 5) {
              failure('文件体积过大, 请选择5MB以下图片文件')
            }
            if (blobInfo.blob().type === 'image/jpeg' || blobInfo.blob().type === 'image/png') {
              uploadPic()
            } else {
              failure('请选择jpeg或png格式图片')
            }
          },
          init_instance_callback: (ed) => {
          }
        }
      }
    },
    props: {
      value: {
        default: '',
        type: String
      },
      config: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    mounted () {
      this.init()
    },
    beforeDestroy () {
      window.tinymce.remove(this.Selector)
    },
    methods: {
      destroy () {
        window.tinymce.remove(this.Selector)
      },
      init () {
        const self = this
  
        this.Editor = window.tinymce.init({
          // prop内传入的的config
          ...this.DefaultConfig,
          ...this.config,

          // 挂载的DOM对象
          selector: `#${this.Id}`,

          setup: (editor) => {
            editor.on('init', () => {
              self.loading = false
              self.$emit('on-ready')
              editor.setContent(self.value)
            })

            editor.on('click', (e) => {
              self.$emit('on-click', e)
            })

            editor.on('focus', (e) => {
              self.$emit('on-focus', e)
            })

            editor.on('blur', (e) => {
              self.$emit('on-blur', e)
            })

            editor.on('error', (e) => {
              self.$emit('on-error', e)
            })

            editor.on('input change undo redo', () => {
              self.$emit('input', editor.getContent())
            })
          }
        })
      }
    }
  }
</script>
<style lang= 'less'>
  div {
    .mce-panel {
      border:none;
      border-radius: 3px;
    }
    .mce-top-part{
      padding: 5px;
    }
    .mce-edit-area{
      padding: 5px;
      border-radius: 0;
    }
    .mce-statusbar{
      box-shadow: 0px -1px 3px #f1f1f1;
      border-radius: 0;
    }
    .mce-window-head{
      padding: 10px 5px;
      border-bottom:0px;
      color: #666;
    }
    .mce-window-body .mce-btn, .mce-foot .mce-btn{
      border-radius: 3px;
    }
    .mce-btn{
      border: none;
      button span{
        text-align: center;
      }
    }
    .mce-dropzone{
      border-radius: 10px;
      color: #cbcbcb;
      border: 2px dashed #cbcbcb;
      &:hover{
        background: #f1f1f1;
      }
    }
    .mce-textbox{
      border-radius: 3px;
    }
    .mce-window{
      border-radius: 3px;
      box-shadow: 0px 1px 5px #cbcbcb;
      border: none;
    }
    .mce-foot{
      border: none
    }
    .mce-tab{
      border: 1px solid #cbcbcb;
      border-bottom: 0px;
      border-radius: 3px 3px 0px 0px ;
      margin-left:3px;
      padding:10px 30px;
      line-height: 15px;
      background: #f1f1f1;
    }
    .mce-toolbar
    .mce-btn-group{
      transition: all .2s;
      border:1px solid #e1e1e1;
      margin: 3px;
      padding: 0px;
      border-radius: 3px;
      overflow: hidden;
    }
    .mce-btn:hover  .mce-ico,
    .mce-btn:active .mce-ico{
      color:#3094fa;
    }
    .mce-btn.mce-active,
    .mce-btn.mce-active{
      &:hover,
      &:focus,
      &:active {
        background: #3094fa;
      }
    }
    .mce-menu-item.mce-active.mce-menu-item-normal{
      background: #3094fa;
    }
    .mce-toolbar .mce-btn-group:hover{
      border:1px solid #3094fa;
    }
    .mce-btn-group .mce-btn{
      margin: 0;
    }
    .mce-path{
      display: none;
    }
  }
  span{
    &.mce-branding{
      float: right;
      background: #fff;
      color: #fff;
      text-shadow:0px 0px 2px #666;
      margin: 6px!important;
      border-radius: 3px;
      height: 15px;
      line-height: 17px;
      padding: 1px 10px;
    }

    &.mce-text{
      display: inline-block;
    }
  }
  </style>
