From 39ca47d2ef20b2609a7514ad588371bbbc4734cd Mon Sep 17 00:00:00 2001 From: JEECG <445654970@qq.com> Date: Mon, 9 Sep 2024 09:32:27 +0800 Subject: [PATCH] =?UTF-8?q?tinymce=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Tinymce/src/Editor.vue | 30 +++++- .../src/components/Tinymce/src/ImgUpload.vue | 48 ++++----- .../components/Tinymce/src/ProcessMask.vue | 99 +++++++++++++++++++ 3 files changed, 153 insertions(+), 24 deletions(-) create mode 100644 jeecgboot-vue3/src/components/Tinymce/src/ProcessMask.vue diff --git a/jeecgboot-vue3/src/components/Tinymce/src/Editor.vue b/jeecgboot-vue3/src/components/Tinymce/src/Editor.vue index b958ace3..40f77408 100644 --- a/jeecgboot-vue3/src/components/Tinymce/src/Editor.vue +++ b/jeecgboot-vue3/src/components/Tinymce/src/Editor.vue @@ -5,6 +5,7 @@ + @@ -33,6 +35,7 @@ import 'tinymce/plugins/image'; import { defineComponent, computed, nextTick, ref, unref, watch, onDeactivated, onBeforeUnmount, onMounted } from 'vue'; import ImgUpload from './ImgUpload.vue'; + import ProcessMask from './ProcessMask.vue'; import {simpleToolbar, menubar, simplePlugins} from './tinymce'; import { buildShortUUID } from '/@/utils/uuid'; import { bindHandlers } from './helper'; @@ -82,6 +85,10 @@ type: Boolean, default: true, }, + showUploadMask: { + type: Boolean, + default: false, + }, //是否聚焦 autoFocus:{ type: Boolean, @@ -91,9 +98,9 @@ export default defineComponent({ name: 'Tinymce', - components: { ImgUpload,Editor }, + components: { ImgUpload,Editor,ProcessMask }, inheritAttrs: false, - props: tinymceProps, + props: tinymceProps as any, emits: ['change', 'update:modelValue', 'inited', 'init-error'], setup(props, { emit, attrs }) { console.log("---Tinymce---初始化---") @@ -103,6 +110,7 @@ const tinymceId = ref(buildShortUUID('tiny-vue')); const elRef = ref>(null); const editorRootRef = ref>(null); + const processMaskRef = ref(null); const imgUploadShow = ref(false); const targetElem = ref(null); @@ -325,6 +333,20 @@ setValue(editor, val); } + /** + * 上传进度计算 + * @param file + * @param fileList + */ + function handleLoading(fileLength,showMask){ + if(fileLength && fileLength > 0){ + setTimeout(() => { + props?.showUploadMask && processMaskRef.value.calcProcess(fileLength) + },100) + }else{ + props?.showUploadMask && (processMaskRef.value.showMask = showMask); + } + } function getUploadingImgName(name: string) { return `[uploading:${name}]`; } @@ -397,6 +419,9 @@ editorRootRef, imgUploadShow, targetElem, + + handleLoading, + processMaskRef }; }, }); @@ -428,6 +453,7 @@ } // update-end--author:liaozhiyang---date:20240527---for:【TV360X-329】富文本禁用状态下工具栏划过边框丢失 } + html[data-theme='dark'] { .@{prefix-cls} { .tox .tox-edit-area__iframe {background-color: #141414;} diff --git a/jeecgboot-vue3/src/components/Tinymce/src/ImgUpload.vue b/jeecgboot-vue3/src/components/Tinymce/src/ImgUpload.vue index b6de1e9a..92eb1102 100644 --- a/jeecgboot-vue3/src/components/Tinymce/src/ImgUpload.vue +++ b/jeecgboot-vue3/src/components/Tinymce/src/ImgUpload.vue @@ -8,6 +8,7 @@ :showUploadList="false" :data="getBizData()" :headers="getheader()" + :before-upload="beforeUpload" accept=".jpg,.jpeg,.gif,.png,.webp" > @@ -37,10 +38,8 @@ default: false, }, }, - emits: ['uploading', 'done', 'error'], + emits: ['uploading', 'done', 'error', 'loading'], setup(props, { emit }) { - let uploading = false; - //update-begin-author:taoyan date:2022-5-13 for: 富文本上传图片不支持 function getheader() { return getHeaders(); @@ -67,33 +66,37 @@ }; }); + let uploadLength = 0; function handleChange({ file, fileList }) { - if (file.status === 'error') { - emit('error'); - uploading = false; + // 过滤掉已经存在的文件 + fileList = fileList.filter((file) => { + const existFile = uploadFileList.value.find(({ uid }) => uid === file.uid); + return existFile ? false : true; + }); + uploadLength == 0 && (uploadLength = fileList.length); + if (file.status != 'uploading') { + emit('loading', uploadLength, true); } - let files = [] as any; - let noUploadingFileCount = 0; + // 处理上传好的文件 if (file.status != 'uploading') { fileList.forEach((file) => { if (file.status === 'done' && file.response.success) { - files.push(file); - } - if (file.status != 'uploading') { - noUploadingFileCount++; + const name = file?.name; + let realUrl = getFileAccessHttpUrl(file.response.message); + uploadFileList.value.push(file); + emit('done', name, realUrl); } }); } - - if (noUploadingFileCount == fileList.length) { - fileList.forEach((file) => { - const name = file?.name; - let realUrl = getFileAccessHttpUrl(file.response.message); - emit('done', name, realUrl); - }); - } } - + //上传之前 + function beforeUpload() { + uploadLength = 0; + emit('loading', null, true); + setTimeout(() => { + emit('loading', null, false); + }, 10000); + } return { prefixCls, handleChange, @@ -102,7 +105,8 @@ getBizData, t, getButtonProps, - uploadFileList + uploadFileList, + beforeUpload, }; }, }); diff --git a/jeecgboot-vue3/src/components/Tinymce/src/ProcessMask.vue b/jeecgboot-vue3/src/components/Tinymce/src/ProcessMask.vue new file mode 100644 index 00000000..ed94b2cc --- /dev/null +++ b/jeecgboot-vue3/src/components/Tinymce/src/ProcessMask.vue @@ -0,0 +1,99 @@ + + + +