<!--
  * @File Tiny富文本编译器
  * @FileDescription  1: 值绑定方式
  *                     表单使用方式 decorator绑定与id 必须同步
  *                     (1.1) 支持正常value v-model绑定
  *                     (1.2) 支持正常append v-model绑定，追加文字
  *                     (2) 支持antd表单绑定
  *                         注意事项: decorator绑定与id 必须同步
  *                             用法: v-decorator="['strTinyEditor', { rules: [{ required: true, transform: v => { return v ? v.replace(/<[^>]+>/g,'') : '' }, message: '请添写文本数据!' }] }]"
  *                                   id='strTinyEditor'
  *                   2: 富文本类型 editorType:
  *                     (1) block  经典模式 大型富文本框 (默认值)
  *                     (2) inlineBlock 内联模式 小型文本框 工具栏浮动
  *                     (3) inline 沉浸模式 无工具栏的多行文本框
  *                   3: 其他变量
  *                     (1) editorHeight 可以设置文本框高度
  * @Author 佟春晓
  * @Date 2021-09-24
  * @Update 佟春晓(2021-09-24)
-->
<template>
  <div :class="(id && editorType !== 'block') && 'editor-box'">
    <editor
      v-if='isEditor'
      :init='init'
      v-model="text"
      :style="editorType !== 'block' && !id ? {border: '1px solid #d9d9d9',backgroundColor: '#fff', margin: '0px 0px', padding: '10px', lineHeight: '12px'} : ''"
      :id='id'
    />
  </div>
</template>

<script>
import tinymce from 'Tinymce/tinymce'
import editor from '../Tinymce'
import '../../Tinymce/tinymce/themes/silver/theme.min.js'
import '../../Tinymce/tinymce/plugins'
import '../../../../static/js/tools/tinymce/bdmap/plugin.min.js'
export default {
  components: {
    editor
  },
  props: {
    value: {
      type: String
    },
    append: {
      type: String
    },
    editorType: {
      type: String,
      default: 'block'
    },
    editorHeight: {
      type: Number,
      default: 600
    },
    id: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      defaultInit: {
        language_url: require('../../Tinymce/tinymce/langs/zh_CN.js'),
        language: 'zh_CN',
        skin_url: '../../../../static/js/tools/tinymce/skins/ui/oxide',
        icons_url: require('../../Tinymce/tinymce/icons/default/icons.min.js'),
        fontsize_formats: '12pt 14pt 16pt 18pt 24pt 36pt 48pt 56pt 72pt 12px 14px 16px 18px 24px 36px 48px 56px 72px',
        plugins: 'print bdmap insertdatetime preview casechange importcss searchreplace  autosave directionality advcode visualblocks visualchars image link media template codesample charmap hr pagebreak nonbreaking anchor toc insertdatetime checklist wordcount textpattern help formatpainter permanentpen pageembed charmap mentions quickbars emoticons',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;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;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
        menubar: 'file edit view insert format tools table tc help',
        toolbar: 'undo redo | bold italic underline strikethrough formatpainter | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor backcolor casechange permanentpen removeformat | pagebreak | charmap emoticons | fullscreen  preview save print insertdatetime | insertfile image media bdmap template link anchor codesample | a11ycheck ltr rtl ',
        template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
        template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
        quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quicktable',
        quickbars_insert_toolbar: 'quicktable | hr pagebreak',
        noneditable_noneditable_class: 'mceNonEditable',
        toolbar_mode: 'sliding',
        content_style: '.mymention{ color: gray; } body {font-size: 12px;}',
        contextmenu: 'link image imagetools table configurepermanentpen',
        height: this.editorHeight
      },
      editorInit: {
        block: {},
        inline: {
          inline: true,
          menubar: false,
          toolbar: false,
          quickbars_selection_toolbar: false,
          quickbars_insert_toolbar: false
        },
        inlineBlock: {
          inline: true
        }
      },
      text: '',
      isEditor: false
    }
  },
  mounted () {
    // 初始化
    tinymce.init({})
    this.isEditor = true
  },
  computed: {
    // 加载默认值
    init () {
      return { ...this.defaultInit, ...this.editorInit[this.editorType] }
    }
  },
  watch: {
    // 子组件改变父组件的值
    text (v) {
      this.$emit('input', v)
      this.$emit('change', v)
    },
    // 父组件改变子组件的值
    value (v) {
      this.text = v
    },
    // 父组件改变子组件的值
    append (v) {
      this.text += v
    }
  }
}
</script>

<style lang="scss" scoped>
.editor-box {
  border: 1px solid #d9d9d9;
  background-color: #fff;
  margin: 0px 0px;
  padding: 10px;
  line-height: 12px;
}
.has-error .editor-box{
  border-color: #f5222d;
}
</style>
