feat(@vben/plugins): tiptap 支持图片上传功能

- 新增 imageUpload 配置项,支持自定义上传接口
- 支持文件选择、拖拽、粘贴三种上传方式
- 上传中显示 blob 预览图 + loading spinner / 进度条
- 支持 accept 和 maxSize 文件校验
- 支持 onUploadError 自定义错误处理
- 未配置 imageUpload 时保持原有 URL 插入行为不变
- 使用 NodeView 实现实时 DOM 控制的进度展示
This commit is contained in:
yuan.ji
2026-04-27 13:42:36 +08:00
parent 36d7dc23fa
commit 4ca2f1c6e8
11 changed files with 2727 additions and 2408 deletions

View File

@@ -54,3 +54,65 @@
max-width: min(100%, 640px);
}
/* Image upload states */
.vben-tiptap-upload-wrapper {
position: relative;
display: inline-block;
max-width: min(100%, 640px);
margin: 1rem 0;
}
.vben-tiptap-upload-wrapper img {
display: block;
margin: 0;
opacity: 0.6;
}
.vben-tiptap-upload-spinner {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: hsl(var(--card) / 30%);
border-radius: 1rem;
}
.vben-tiptap-upload-spinner::after {
display: block;
width: 24px;
height: 24px;
content: '';
border: 2px solid hsl(var(--foreground) / 30%);
border-top-color: hsl(var(--foreground));
border-radius: 50%;
animation: vben-tiptap-spin 0.8s linear infinite;
}
.vben-tiptap-upload-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
overflow: hidden;
background-color: hsl(var(--muted));
border-radius: 0 0 1rem 1rem;
}
.vben-tiptap-upload-progress-fill {
height: 100%;
background-color: hsl(var(--primary));
transition: width 0.2s ease;
}
@keyframes vben-tiptap-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}