<template>
  <div class="tinymce-editor">
    <editor
      v-model="myValue"
            :init="init"
    >
    </editor>
  </div>
</template>
<script>
  import {axios} from '@/util/axios/request'
  import tinymce from 'tinymce/tinymce'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/themes/silver'
  // // 编辑器插件plugins
  // import 'tinymce/themes/modern/theme'
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/media'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/wordcount'
  import 'tinymce/plugins/colorpicker'

  const initParam = {
    language_url: '/tinymce/langs/zh_CN.js',
    language: 'zh_CN',
    skin_url: '/tinymce/skins/ui/oxide',
    height: 600,
    plugins: `lists image media table wordcount `,
    paste_auto_cleanup_on_paste : true,
    paste_remove_styles: true,
    paste_remove_styles_if_webkit: true,
    paste_strip_class_attributes: true,
    toolbar: `undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat`,

    fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 36px",
    lineheight_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 36pt",
    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%; border:none; border-color:#999; }
            .mce-object-iframe        { width:100%; box-sizing:border-box; margin:0; padding:0; }
            ul,ol                     { list-style-position:inside; }
          `,
    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' }
        ]
      }
    ],
    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`,
    branding: false,
    menubar: false,
    images_upload_handler: function (blobInfo, success, failure) {
      let formdata = new FormData()
      formdata.set('file', blobInfo.blob())
      axios({
        url: '/common/upload/file/richText/img',
        method: 'post',
        data: formdata,
      }).then(resp => {
        if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
          success(resp.data.url)
        } else {
          failure('error' + resp)
        }
      })
    }
  }

  export default {
    components: {
      Editor
    },
    props: {
      value: {
        type: String,
        default: ''
      },
    },
    data () {
      return {
        init: initParam,
        myValue: this.value,
      }
    },
    mounted () {
      tinymce.init({})
    },
    methods: {
      // // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
      // // 需要什么事件可以自己增加
      // onClick (e) {
      //   this.$emit('onClick', e, tinymce)
      // },
      // // 可以添加一些自己的自定义事件，如清空内容
      // clear () {
      //   this.myValue = ''
      // }
      // show(content){
      //   this.$nextTick(() => {
      //     this.$emit('input', content);
      //   });
      //   this.$emit('input', content);
      // }
    },
    watch: {
      value (newValue) {
        this.myValue = newValue
      },
      myValue (newValue) {
        this.$emit('input', newValue)
      }
    }
  }

</script>
