<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-06-11 17:29:53
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-20 19:32:36
 -->
<!--
备注：由于使用拖拽上传图片，超过限制的图片不上传不显示，暂时修改了源码的的方法，增加了一个判断，
本来 images_upload_handler 中增加了判断可是

安装 tinymce
$ npm install @tinymce/tinymce-vue -S

npm install tinymce -S

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下

文中所有 static 目录相关都这样处理

tinymce 默认是英文界面，所以还需要下载一个中文语言包：
中文：https://tinymce-services.azurewebsites.net/1/i18n/download?langs=zh_CN

然后将这个语言包放到 static 目录下，为了结构清晰，包一层 tinymce 目录

static
|____tinymce
     |___skins
     |___zh_CN.js

<tinymce-edit :disabledEdit="" ref="tinymceWrap" :bodyHtml="ruleForm.gradeDescribe" :projectName="projectName" @changeEditor="changeEditor"></tinymce-edit>

import tinymceEdit from '@/components/tinymce-edit'
引入路径修改成自己的路径

 -->
<template>
  <div class="tinymce-contain">
    <editor
      id="tinymce"
      v-model="tinymceHtml"
      :init="init"
      :disabled="disabledEdit"
    ></editor>
  </div>
</template>
<script>
/* eslint-disable */
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/modern/theme';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/contextmenu';
import 'tinymce/plugins/wordcount';
import 'tinymce/plugins/colorpicker';
import 'tinymce/plugins/textcolor';
export default {
  name: 'tinymce-edit',
  props: {
    /* value: {
      type: String,
      default() {
        return '';
      }
    } */
    disabledEdit: {
      type: Boolean,
      default() {
        return false;
      }
    },
    bodyHtml: {
      type: String,
      default() {
        return '';
      }
    },
    projectName: {
      type: String,
      default() {
        return 'haoban-manage-web';
      }
    }
  },
  data() {
    return {
      repProjectName: 'haoban-manage-web',
      // tinymce
      tinymceHtml: '请输入内容',
      init: {
        language_url: 'static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: 'static/tinymce/skins/lightgray',
        height: 300,
        // 添加插件
        plugins: 'link colorpicker textcolor  ', // paste media preview
        toolbar: 'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo  | removeformat',
        branding: false,
        setup: function(editor) {
          // 点击编辑框回调
          editor.on('click input change undo redo execCommand KeyUp', function(e) {

          });
        },
        fontsize_formats: '8px 10px 12px 14px 18px 24px 36px'
      }
    };
  },
  methods: {

  },
  watch: {
    projectName: function(newData, oldData) {
      const that = this;
      that.repProjectName = newData || 'gic-web';
    },
    tinymceHtml: function(newData, oldData) {
      const that = this;
      that.$emit('changeEditor', newData);
    },
    bodyHtml: function(newData, oldData) {
      const that = this;
      that.tinymceHtml = newData;
    }
  },
  components: {
    Editor
  },
  mounted() {
    const that = this;
    tinymce.init({});
    that.tinymceHtml = that.bodyHtml;
  }
};
</script>
<style lang="less" scoped>
.tinymce-contain {
  width: 100%;
  position: relative;

  /deep/ .mce-tinymce {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border: 1px solid #dcdfe6;
  }

  /deep/ .mce-panel {
    border: 0px solid #dcdfe6;
  }
}
</style>
