<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden;"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      :limit="limit"
      @onChange="onChange"
      @onCreated="onCreated"
    />
    <p v-if="errorShow" class="warnText">
        编辑内容不能超过{{limit}}个字!
      </p>
  <span v-if="limit" class="wordNumber ">{{ length }}/{{limit}}</span>
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {getToken} from "@/utils/auth"; //组件

// yarn add @wangeditor/editor
// # 或者 npm install @wangeditor/editor --save

// yarn add @wangeditor/editor-for-vue
// # 或者 npm install @wangeditor/editor-for-vue --save

export default {
  name: "index",
  components: { Editor, Toolbar },
  props:{
    value:{
      type:String,
      default:''
    },
    // 限制
    limit: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        excludeKeys: [
          'uploadVideo',
          'emotion',
          'fullScreen',
        ],
      },
      editorConfig: {
        placeholder: '',
        MENU_CONF: {
          uploadImage: {
            maxFileSize: 10 * 1024 * 1024, // 1M
            server: process.env.VUE_APP_BASE_API + "/common/upload",
            fieldName: 'file',
            // 自定义增加 http  header
            headers: {
              Authorization: "Bearer " + getToken(),
            },
            // 上传进度的回调函数
            onProgress(progress) {
              // progress 是 0-100 的数字
              console.log('progress', progress)
            },
            // 单个文件上传成功之后
            onSuccess(file, res) {
              this.$modal.msgSuccess("上传成功");
            },
            // 上传错误，或者触发 timeout 超时
            onError(file, err, res) {
              this.$modal.msgError("上传失败");
            },
            customInsert(result, insertFn) {
              // res 即服务端的返回结果
              insertFn(result.url,'','')
            }
          }
        }
      },
      mode: 'default', // or 'simple'
      length:0,
      errorShow: false,
    }
  },
  methods: {
    onCreated(editor) {
      this.html = this.value
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor){
      this.length = this.html.length;//.replace(/<[^>]+>/g, '')
      if (this.html !== this.value) {
        //console.log(this.length);
        if(this.limit != 0 && this.length > this.limit){
           //console.log(typeof(this.html),this.length,this.limit,">>>");
            this.errorShow = true;
        }else{
            this.$emit('input', this.html) // 将内容同步到父组件中
        }
      }
    }
  },
  watch: {
    value: function(value) {
      if (value !== this.html) {
        this.html = value
      }
    }
    //value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}

</script>

<style >
.w-e-toolbar {
  z-index: 2!important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}
.w-e-bar-item-menus-container .title{
  margin: 0 !important;
}
.wordNumber {
    color: #909399;
    background: #fff;
    text-align: right;
    z-index: 100;
    right: 30px;
    bottom: 5px;
    font-size: 16px;
    position: absolute;
  }
.warnText{
  color: red;
    font-size: 16px;
}
</style>
