perf: 优化富文本输入框

This commit is contained in:
kuaifan 2023-06-11 09:22:56 +08:00
parent 722b3b4788
commit 644d8e22a1
3 changed files with 38 additions and 21 deletions

View File

@ -148,32 +148,24 @@
uploadIng: 0,
uploadFormat: ['jpg', 'jpeg', 'webp', 'png', 'gif', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'esp', 'pdf', 'rar', 'zip', 'gz', 'ai', 'avi', 'bmp', 'cdr', 'eps', 'mov', 'mp3', 'mp4', 'pr', 'psd', 'svg', 'tif'],
actionUrl: $A.apiUrl('system/fileupload'),
maxSize: 10240
maxSize: 10240,
timer: null,
};
},
mounted() {
this.content = this.value;
this.init();
},
beforeDestroy() {
if (this.editor !== null) {
this.editor.destroy()
this.editor = null
}
this.spinShow = true;
$A(this.$refs.myTextarea).show();
},
activated() {
this.content = this.value;
this.init();
},
deactivated() {
if (this.editor !== null) {
this.editor.destroy()
this.editor = null
}
this.spinShow = true;
$A(this.$refs.myTextarea).show();
this.destroy();
},
destroyed() {
this.destroy();
},
computed: {
...mapState(['themeIsDark']),
@ -206,6 +198,7 @@
},
methods: {
init() {
this.timer && clearTimeout(this.timer);
this.$nextTick(() => {
tinymce.init(this.concatAssciativeArrays(this.option(false), this.options));
});
@ -217,6 +210,22 @@
});
},
destroy() {
this.timer && clearTimeout(this.timer);
this.timer = setTimeout(_ => {
if (this.editor !== null) {
this.editor.destroy()
this.editor = null
}
if (this.editorT !== null) {
this.editorT.destroy();
this.editorT = null;
}
this.spinShow = true;
$A(this.$refs.myTextarea).show();
}, 500);
},
plugin(isFull) {
if (isFull) {
return this.plugins.filter((val) => val != 'autoresize');

View File

@ -93,14 +93,14 @@
<i class="taskfont">&#xe7c0;</i>
{{$L('上传文件')}}
</div>
<div class="chat-input-popover-item" @click="onToolbar('full')">
<i class="taskfont">&#xe6a7;</i>
{{$L('全屏输入')}}
</div>
<div v-if="canAnon" class="chat-input-popover-item" @click="onToolbar('anon')">
<i class="taskfont">&#xe690;</i>
{{$L('匿名消息')}}
</div>
<div class="chat-input-popover-item" @click="onToolbar('full')">
<i class="taskfont">&#xe6a7;</i>
{{$L('全屏输入')}}
</div>
</EPopover>
</li>
@ -628,6 +628,10 @@ export default {
wrapperHeight(newVal, oldVal) {
this.$emit('on-height-change', {newVal, oldVal})
},
fullInput(val) {
this.quill?.enable(!val)
}
},
methods: {
@ -1174,6 +1178,10 @@ export default {
}, this.options))
this.fullQuill.enable(true)
this.$refs.editorFull.firstChild.innerHTML = this.$refs.editor.firstChild.innerHTML
this.$nextTick(_ => {
this.fullQuill.setSelection(this.fullQuill.getLength())
this.fullQuill.focus()
})
})
}
},

View File

@ -74,7 +74,7 @@
</div>
<div class="project-subbox">
<div class="project-subtitle" @click="showDesc">
<MarkdownPreviewNostyle :initialValue="projectData.desc"/>
<MarkdownPreviewNostyle ref="descPreview" :initialValue="projectData.desc"/>
</div>
<div class="project-switch">
<div v-if="completedCount > 0" class="project-checkbox">
@ -897,7 +897,7 @@ export default {
$A.modalInfo({
language: false,
title: this.$L('项目描述'),
content: this.projectData.desc
content: this.$refs.descPreview.$el.innerHTML
})
},