feat(@vben/plugins): tiptap 组件新增 maxHeight 属性支持及文档 (#7897)
* feat(@vben/plugins): tiptap 组件新增 maxHeight 属性支持 - 新增 maxHeight prop 支持限制编辑器最大高度 - 编辑器内容区超出最大高度时自动滚动 - 移除 style.css 中未使用的 CSS 规则 * docs(@vben/plugins): 添加 tiptap 富文本编辑器组件文档 - 新增中文文档 docs/src/components/common-ui/vben-tiptap.md - 新增英文文档 docs/src/en/components/common-ui/vben-tiptap.md - 新增基础用法示例 demos/vben-tiptap/basic - 新增图片上传示例 demos/vben-tiptap/image-upload - 更新文档侧边栏配置 * fix(@vben/plugins): extract URL from response in image upload callback The upload callback was incorrectly passing the AxiosResponse object to resolve() instead of extracting the actual image URL string. This caused the editor to insert [object Object] as image src, resulting in broken images. * chore: add changeset for tiptap maxHeight feature * Revert "chore: add changeset for tiptap maxHeight feature" This reverts commit a28fc4441f14641f6af6c1a143aa6959591315b2.
This commit is contained in:
20
docs/src/demos/vben-tiptap/basic/index.vue
Normal file
20
docs/src/demos/vben-tiptap/basic/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { VbenTiptap } from '@vben/plugins/tiptap';
|
||||
|
||||
const content = ref('<p>开始编辑你的内容...</p>');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VbenTiptap v-model="content" />
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500">当前内容:</p>
|
||||
<pre
|
||||
class="mt-2 p-2 bg-gray-100 rounded text-xs overflow-auto max-h-40"
|
||||
>{{ content }}</pre
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
45
docs/src/demos/vben-tiptap/image-upload/index.vue
Normal file
45
docs/src/demos/vben-tiptap/image-upload/index.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { type ImageUploadOptions, VbenTiptap } from '@vben/plugins/tiptap';
|
||||
|
||||
const content = ref('');
|
||||
|
||||
// Mock upload function with progress simulation
|
||||
const imageUpload: ImageUploadOptions = {
|
||||
accept: 'image/jpeg,image/png,image/gif,image/webp',
|
||||
maxSize: 5 * 1024 * 1024, // 5MB
|
||||
upload: async (_file, onProgress) => {
|
||||
// Simulate upload progress
|
||||
for (let i = 0; i <= 100; i += 10) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
onProgress?.(i);
|
||||
}
|
||||
|
||||
// Return a mock image URL (using picsum for demo)
|
||||
return `https://picsum.photos/seed/${Date.now()}/800/400`;
|
||||
},
|
||||
onUploadError: (error) => {
|
||||
console.error('Upload error:', error);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VbenTiptap
|
||||
v-model="content"
|
||||
:image-upload="imageUpload"
|
||||
placeholder="尝试拖拽或粘贴图片..."
|
||||
/>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-gray-500">提示:</p>
|
||||
<ul class="mt-2 text-xs text-gray-400 list-disc pl-4">
|
||||
<li>点击工具栏图片按钮可选择本地上传或 URL 插入</li>
|
||||
<li>拖拽图片到编辑器区域可直接上传</li>
|
||||
<li>粘贴图片也会触发上传</li>
|
||||
<li>上传过程中会显示进度条</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user