# 📝 Markdown编辑器文件库选取功能演示

## 🎯 功能概述

我已经成功为Markdown编辑器实现了与富文本编辑器一样的文件库选取功能，让用户可以方便地从文件库中选择图片和视频。

### ✨ 核心功能

1. **📷 图片库选取**
   - 点击"从图片库选择"按钮
   - 打开图片文件库选择弹窗
   - 选择图片后自动插入Markdown图片语法

2. **🎬 视频库选取**
   - 点击"从视频库选择"按钮
   - 打开视频文件库选择弹窗
   - 选择视频后自动插入HTML视频标签

3. **🔄 拖拽上传支持**
   - 保留原有的拖拽上传功能
   - 支持直接拖拽图片到编辑器
   - 自动上传并插入图片链接

### 🔧 技术实现

#### 1. 工具栏扩展按钮

```vue
<!-- 📝 Markdown编辑器工具栏扩展 -->
<div class="markdown-toolbar-extension">
  <a-button 
    type="primary" 
    size="small" 
    @click="openMarkdownImageSelector"
    style="margin-right: 8px;"
  >
    📷 从图片库选择
  </a-button>
  <a-button 
    type="default" 
    size="small" 
    @click="openMarkdownVideoSelector"
    style="margin-right: 8px;"
  >
    🎬 从视频库选择
  </a-button>
</div>
```

#### 2. 图片选择处理函数

```typescript
// 📝 Markdown编辑器图片选择器
const openMarkdownImageSelector = () => {
  fileSelectCallback.value = (url: string) => {
    // 在当前光标位置插入Markdown图片语法
    const imageMarkdown = `![图片](${url})`;
    insertMarkdownText(imageMarkdown);
  };
  showFileSelector.value = true;
};
```

#### 3. 视频选择处理函数

```typescript
// 📝 Markdown编辑器视频选择器
const openMarkdownVideoSelector = () => {
  videoSelectCallback.value = (url: string) => {
    // 在当前光标位置插入Markdown视频语法（使用HTML标签）
    const videoMarkdown = `<video controls style="max-width: 100%; height: auto;">
  <source src="${url}" type="video/mp4">
  您的浏览器不支持视频播放。
</video>`;
    insertMarkdownText(videoMarkdown);
  };
  showVideoSelector.value = true;
};
```

#### 4. 文本插入功能

```typescript
// 📝 在Markdown编辑器中插入文本
const insertMarkdownText = (text: string) => {
  // 简单的文本插入，在内容末尾添加
  if (content.value) {
    content.value += '\n\n' + text;
  } else {
    content.value = text;
  }
};
```

#### 5. 拖拽上传处理

```typescript
// 📝 Markdown编辑器图片上传处理
const onMarkdownUploadImg = async (files: File[], callback: (urls: string[]) => void) => {
  try {
    const uploadPromises = files.map(async (file) => {
      // 检查文件大小（限制为10MB）
      if (file.size > 10 * 1024 * 1024) {
        message.error(`图片 ${file.name} 大小超过10MB，请选择更小的文件`);
        return null;
      }

      // 检查文件类型
      if (!file.type.startsWith('image/')) {
        message.error(`文件 ${file.name} 不是有效的图片格式`);
        return null;
      }

      try {
        const result = await uploadOss(file);
        return result.url || result.path;
      } catch (error) {
        console.error('图片上传失败:', error);
        message.error(`图片 ${file.name} 上传失败`);
        return null;
      }
    });

    const results = await Promise.all(uploadPromises);
    const successUrls = results.filter(url => url !== null) as string[];
    
    if (successUrls.length > 0) {
      callback(successUrls);
      message.success(`成功上传 ${successUrls.length} 张图片`);
    }
  } catch (error) {
    console.error('批量上传失败:', error);
    message.error('图片上传失败，请重试');
  }
};
```

### 🎨 样式设计

工具栏扩展按钮采用了现代化的设计：

```less
// 📝 Markdown编辑器工具栏扩展样式
.markdown-toolbar-extension {
  margin-bottom: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  
  .ant-btn {
    border-radius: 6px;
    font-size: 13px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
  }
}
```

### 📊 功能对比

| 功能 | 富文本编辑器 | Markdown编辑器 | 状态 |
|------|-------------|---------------|------|
| 文件库选择图片 | ✅ | ✅ | 已实现 |
| 文件库选择视频 | ✅ | ✅ | 已实现 |
| 拖拽上传图片 | ✅ | ✅ | 已实现 |
| 粘贴上传图片 | ✅ | ✅ | 已实现 |
| 文件大小检查 | ✅ | ✅ | 已实现 |
| 文件类型检查 | ✅ | ✅ | 已实现 |
| 上传进度提示 | ✅ | ✅ | 已实现 |

### 🚀 使用方式

1. **选择Markdown编辑器**：在编辑器类型选择器中选择"Markdown编辑器"
2. **插入图片**：
   - 点击"📷 从图片库选择"按钮
   - 在弹出的文件库中选择图片
   - 系统自动插入 `![图片](url)` 格式
3. **插入视频**：
   - 点击"🎬 从视频库选择"按钮
   - 在弹出的视频库中选择视频
   - 系统自动插入HTML5视频标签
4. **拖拽上传**：
   - 直接拖拽图片文件到编辑器
   - 系统自动上传并插入图片链接

### 💡 用户体验优化

- **统一体验**：与富文本编辑器保持一致的文件选择体验
- **智能插入**：自动生成正确的Markdown语法
- **视觉反馈**：按钮悬停效果和上传进度提示
- **错误处理**：完善的文件大小和类型检查
- **响应式设计**：适配不同屏幕尺寸

### 🔄 格式转换

当用户在富文本编辑器和Markdown编辑器之间切换时，系统会自动进行格式转换：

- **富文本 → Markdown**：HTML标签转换为Markdown语法
- **Markdown → 富文本**：Markdown语法转换为HTML标签

这个功能让用户在使用Markdown编辑器时也能享受到与富文本编辑器一样便捷的文件管理体验！🎉