用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;;
}