mirror of
https://github.com/imdap/ruoyi-plus-vben5.git
synced 2026-05-13 06:42: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 { Editor } from '@tiptap/vue-3';
|
||||||
|
|
||||||
import type { ImageUploadOptions, ToolbarAction, ToolbarMenuItem } from './types';
|
import type {
|
||||||
|
ImageUploadOptions,
|
||||||
|
ToolbarAction,
|
||||||
|
ToolbarMenuItem,
|
||||||
|
} from './types';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
AlignCenter,
|
AlignCenter,
|
||||||
|
|||||||
@@ -11,7 +11,10 @@ export interface ImageUploadOptions {
|
|||||||
/** 上传失败回调,未提供时使用 alert 弹窗提示 */
|
/** 上传失败回调,未提供时使用 alert 弹窗提示 */
|
||||||
onUploadError?: (error: unknown) => void;
|
onUploadError?: (error: unknown) => void;
|
||||||
/** 上传函数,返回图片 URL,可选 onProgress 回调报告上传进度 */
|
/** 上传函数,返回图片 URL,可选 onProgress 回调报告上传进度 */
|
||||||
upload: (file: File, onProgress?: (percent: number) => void) => Promise<string>;
|
upload: (
|
||||||
|
file: File,
|
||||||
|
onProgress?: (percent: number) => void,
|
||||||
|
) => Promise<string>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface TipTapProps {
|
export interface TipTapProps {
|
||||||
|
|||||||
@@ -1,12 +1,10 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
import type { ImageUploadOptions } from '@vben/plugins/tiptap';
|
||||||
|
|
||||||
import { computed, ref } from 'vue';
|
import { computed, ref } from 'vue';
|
||||||
|
|
||||||
import { Page } from '@vben/common-ui';
|
import { Page } from '@vben/common-ui';
|
||||||
import {
|
import { VbenTiptap, VbenTiptapPreview } from '@vben/plugins/tiptap';
|
||||||
type ImageUploadOptions,
|
|
||||||
VbenTiptap,
|
|
||||||
VbenTiptapPreview,
|
|
||||||
} from '@vben/plugins/tiptap';
|
|
||||||
|
|
||||||
import { Card, Switch } from 'ant-design-vue';
|
import { Card, Switch } from 'ant-design-vue';
|
||||||
const content = ref(`
|
const content = ref(`
|
||||||
@@ -36,7 +34,7 @@ const imageUpload: ImageUploadOptions = {
|
|||||||
if (progress >= 100) {
|
if (progress >= 100) {
|
||||||
// 上传完成后返回 mock URL
|
// 上传完成后返回 mock URL
|
||||||
resolve(
|
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);
|
}, 300);
|
||||||
|
|||||||
Reference in New Issue
Block a user