by2025/admin-vben5
9
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

update: TinyMCE上传失败移除图片

Browse Source
This commit is contained in:
dap 2025-04-05 15:09:22 +08:00
parent 7fc284a609
commit 78c16c1016
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web-antd/src/components/tinymce/src/editor.vue
View File

@ -2,7 +2,7 @@
import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes'; import type { IPropTypes } from '@tinymce/tinymce-vue/lib/cjs/main/ts/components/EditorPropTypes';
import type { Editor as EditorType } from 'tinymce/tinymce'; import type { Editor as EditorType } from 'tinymce/tinymce';
import type { UploadResult } from '#/api'; import type { AxiosProgressEvent, UploadResult } from '#/api';
import { computed, nextTick, ref, shallowRef, useAttrs, watch } from 'vue'; import { computed, nextTick, ref, shallowRef, useAttrs, watch } from 'vue';
@ -121,6 +121,7 @@ const initOptions = computed((): InitOptions => {
* images_upload_handler启用时为上传 * images_upload_handler启用时为上传
*/ */
paste_data_images: true, paste_data_images: true,
images_file_types: 'jpeg,jpg,png,gif,bmp,webp',
plugins, plugins,
quickbars_selection_toolbar: quickbars_selection_toolbar:
'bold italic | quicklink h2 h3 blockquote quickimage quicktable', 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
@ -133,12 +134,18 @@ const initOptions = computed((): InitOptions => {
* @param blobInfo * @param blobInfo
* 大坑 不要调用这两个函数 success failure: * 大坑 不要调用这两个函数 success failure:
* 使用resolve/reject代替 * 使用resolve/reject代替
* (PS: 新版已经没有success failure)
*/ */
images_upload_handler: (blobInfo) => { images_upload_handler: (blobInfo, progress) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const file = blobInfo.blob(); const file = blobInfo.blob();
// const filename = blobInfo.filename(); // const filename = blobInfo.filename();
uploadApi(file) // 进度条事件
const progressEvent: AxiosProgressEvent = (e) => {
const percent = Math.trunc((e.loaded / e.total!) * 100);
progress(percent);
};
uploadApi(file, { onUploadProgress: progressEvent })
.then((response) => { .then((response) => {
const { url } = response as unknown as UploadResult; const { url } = response as unknown as UploadResult;
console.log('tinymce上传图片:', url); console.log('tinymce上传图片:', url);
@ -146,7 +153,8 @@ const initOptions = computed((): InitOptions => {
}) })
.catch((error) => { .catch((error) => {
console.error('tinymce上传图片失败:', error); console.error('tinymce上传图片失败:', error);
reject(error.message); // eslint-disable-next-line prefer-promise-reject-errors
reject({ message: error.message, remove: true });
}); });
}); });
}, },