tinymce 5.10.x 上传进度条

 用antdv组件+jquery操作dom来实现的 ，实现过程很low，但是效果还行

上代码

template: 

<template>
  <div class="tinymce-editor">
    <editor
        v-model="myValue"
        :init="init"
        :disabled="disabled"
    >
    </editor>
    <div class="tinymce-upload-progress-box">
      <a-progress class="tinymce-upload-progress" type="circle" :percent="uploadProgressPercent" />
    </div>
  </div>
</template>

 关键js:

1.$是自己在main.js注册jquery到vue全局变量中的

2.编辑器各种事件自己配置一下

3.之所以有sourceBox ，是因为modal隐藏之后，由于是$append，进度条会跟着消失，这里需要在上传完成之后，把进度条组件还回去

uploadConfig(callback){
      let dialog = this.$('.tox-dialog-wrap div[role="dialog"]');
      let progress = this.$('.tinymce-upload-progress')
      let progressBar = this.$('<div class="progress-bar"></div>')
      let sourceBox = this.$('.tinymce-upload-progress-box')
      return {
        success:(url)=>{
          callback(url)
        },
        progressBox:(status)=>{
          if(status){
            // 显示进度条
            progressBar.append(progress)
            dialog.append(progressBar)
            progress.show();
          }else{
            progress.hide();
            sourceBox.append(progress)
            progressBar.remove()
            this.uploadProgressPercent=0
            // 隐藏进度条
          }
        },
        progress:(percent)=>{
          this.uploadProgressPercent=percent
        }        
      }
    }

.tox-dialog-wrap .progress-bar{
  position: absolute;
  background-color: #ffffffbf;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.tinymce-upload-progress{
  position: absolute !important;
  text-align: center;
  display:none;
  top: 50%;
  left: 50%;
  margin-top: -62px !important;;
  margin-left: -60px !important;;
}