mirror of
https://github.com/imdap/ruoyi-plus-vben5.git
synced 2026-05-12 22:22:10 +08:00
feat(@vben/plugins): 补充 tiptap 图片上传类型、工具栏和示例
- 新增 ImageUploadOptions 类型定义和 imageUpload 属性 - 工具栏图片按钮支持上传/URL 双模式 - playground 添加图片上传 mock 示例
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user