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

- 新增 ImageUploadOptions 类型定义和 imageUpload 属性
- 工具栏图片按钮支持上传/URL 双模式
- playground 添加图片上传 mock 示例
This commit is contained in:
yuan.ji
2026-04-27 13:42:56 +08:00
parent 4ca2f1c6e8
commit c6fd599784
3 changed files with 13 additions and 8 deletions

View File

@@ -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,

View File

@@ -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 {

View File

@@ -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);