<template>
    <div>
      <div id="editor" class="editor"></div>
    </div>
</template>

<script>
import axios from '@/libs/api.request';
import E from 'wangeditor';

export default {
  name: 'editor-wangeditor', // 组件名称
  data(){
    return {
      editorContent:this.editorInfo,
    }
  },
  //组件传值
  props:['editorInfo'],
  mounted(){
    this.initEditor();
  },
  methods:{
    initEditor(){
      var _this = this;
      var editor = new E('#editor');
      // 配置 server 接口地址
      // 本地图片上传：关闭外部图片引入
      // editor.customConfig.showLinkImg = false;
      editor.customConfig.uploadImgMaxLength = 5; // 一次最多上传 5 个图片
      // 本地图片上传：重写方法
      editor.customConfig.customUploadImg = function (files, insert) {
          // 逐个上传
          let data = [];
          files.forEach(item => {
              data = new FormData();
              data.append('file', item);
              axios.request({
                  url: '/config/upload/UploadImage',
                  data,
                  method: 'post'
                  })
                  .then(res =>{
                      if (res.status === 200) {
                          // 塞进去
                          insert(axios.publicPath+res.data.data);
                      }
                  }).catch(()=>{
                      _this.$Message.error(this.$t('600512'))
              })
          });
      };
      // 配置 onchange 回调函数
      editor.customConfig.onchange = function (newHtml) {
          _this.editorContent = newHtml;
          _this.getEditorInfo(newHtml); //把内容传给父组件
      }
      // 配置触发 onchange 的时间频率，默认为 200ms
      editor.customConfig.onchangeTimeout = 500; // 修改为 500ms
      editor.create();
      editor.txt.html(_this.editorContent) // 重新设置编辑器内容
    },
    getEditorInfo(info){
      this.$emit('seteditorInfo',info);
    }
  }
}
</script>

<style lang="less">
  #editor{
      .w-e-toolbar{
          background-color:#fff!important;
      }
  }
</style>