Explorar o código

feat(@vben/plugins): 补充 tiptap 图片上传类型、工具栏和示例

- 新增 ImageUploadOptions 类型定义和 imageUpload 属性
- 工具栏图片按钮支持上传/URL 双模式
- playground 添加图片上传 mock 示例
yuan.ji hai 1 mes
pai
achega
c6fd599784

+ 5 - 1
packages/effects/plugins/src/tiptap/toolbar.ts

@@ -1,6 +1,10 @@
 import type { Editor } from '@tiptap/vue-3';
 
-import type { ImageUploadOptions, ToolbarAction, ToolbarMenuItem } from './types';
+import type {
+  ImageUploadOptions,
+  ToolbarAction,
+  ToolbarMenuItem,
+} from './types';
 
 import {
   AlignCenter,

+ 4 - 1
packages/effects/plugins/src/tiptap/types.ts

@@ -11,7 +11,10 @@ export interface ImageUploadOptions {
   /** 上传失败回调,未提供时使用 alert 弹窗提示 */
   onUploadError?: (error: unknown) => void;
   /** 上传函数,返回图片 URL,可选 onProgress 回调报告上传进度 */
-  upload: (file: File, onProgress?: (percent: number) => void) => Promise<string>;
+  upload: (
+    file: File,
+    onProgress?: (percent: number) => void,
+  ) => Promise<string>;
 }
 
 export interface TipTapProps {

+ 4 - 6
playground/src/views/examples/tiptap/index.vue

@@ -1,12 +1,10 @@
 <script lang="ts" setup>
+import type { ImageUploadOptions } from '@vben/plugins/tiptap';
+
 import { computed, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
-import {
-  type ImageUploadOptions,
-  VbenTiptap,
-  VbenTiptapPreview,
-} from '@vben/plugins/tiptap';
+import { VbenTiptap, VbenTiptapPreview } from '@vben/plugins/tiptap';
 
 import { Card, Switch } from 'ant-design-vue';
 const content = ref(`
@@ -36,7 +34,7 @@ const imageUpload: ImageUploadOptions = {
         if (progress >= 100) {
           // 上传完成后返回 mock URL
           resolve(
-            `https://picsum.photos/seed/${Date.now()}/640/${Math.round(640 * (file.size % 3 + 2) / 4)}`,
+            `https://picsum.photos/seed/${Date.now()}/640/${Math.round((640 * ((file.size % 3) + 2)) / 4)}`,
           );
         }
       }, 300);