项目概述 我使用现有的Vite + Vue 3项目（位于vite-project/目录），创建了一个功能完整的Markdown编辑器，具有以下特性：

主要功能 分栏编辑模式：支持编辑/预览分栏布局和单栏实时预览模式 代码高亮：使用highlight.js支持多种编程语言的语法高亮 快捷键支持：集成Mousetrap提供常用格式快捷键 工具栏快速插入：提供格式化按钮快速插入Markdown语法 暗色/亮色模式：支持预览区域主题切换 实时统计：显示字符数和行数统计 导出功能：支持导出Markdown文件 快捷键列表 Ctrl + S: 保存/导出内容 Ctrl + B: 插入粗体文本 Ctrl + I: 插入斜体文本 Ctrl + K: 插入代码块 Ctrl + H: 插入二级标题 Ctrl + Shift + H: 插入一级标题 Tab: 缩进（在编辑器中） 技术栈 Vue 3: 前端框架 markdown-it: Markdown解析器 highlight.js: 代码语法高亮 mousetrap: 快捷键库 项目结构

vite-project/ ├── src/ │ ├── components/ │ │ ├── MarkdownEditor.vue # 主编辑器组件 │ │ └── HelloWorld.vue │ ├── App.vue # 更新为使用MarkdownEditor │ ├── main.js # 应用入口 │ └── style.css # 全局样式 ├── package.json # 依赖配置 └── vite.config.js # Vite配置 运行项目 项目已配置完成，可以通过以下步骤运行：

进入项目目录：

cd vite-project 启动开发服务器：

npm run dev 在浏览器中访问：http://localhost:5173

编辑器特性 分栏布局：可切换编辑/预览分栏模式 代码高亮：支持JavaScript、Python等多种语言 实时预览：编辑时立即看到渲染效果 响应式设计：适配不同屏幕尺寸 工具栏：快速插入常用Markdown语法 主题切换：预览区域支持暗色/亮色模式 编辑器已包含示例Markdown内容，展示了各种格式的使用方法，包括标题、列表、代码块、引用等。用户可以直接开始编辑或使用工具栏/快捷键快速格式化内容。

虽然有Node.js版本警告（当前20.18.0，需要20.19+），但项目已成功启动并可以正常使用。如需消除警告，可以升级Node.js版本到20.19+或22.12+。

图片上传功能已成功添加到Markdown编辑器。以下是实现的功能：

主要特性 粘贴图片上传：在编辑区域按 Ctrl+V 粘贴图片时自动上传 文件验证：支持最大5MB的JPEG、PNG、GIF、WebP、SVG格式 模拟上传：默认使用模拟上传（800ms延迟），方便测试 状态显示：编辑器底部显示上传状态（上传中、上传失败） 快捷键提示：标题栏已添加"Ctrl+V: Upload Image"提示 配置说明 当前配置使用模拟上传。要连接真实API，请修改 MarkdownEditor.vue:122 中的 uploadConfig：

const uploadConfig = { endpoint: '/api/upload', // 替换为实际API端点 method: 'POST', fieldName: 'image', useMock: false // 关闭模拟上传 } API应返回 { url: '图片URL' } 格式的JSON响应。

使用方式 复制图片到剪贴板（截图、从文件管理器复制等） 在编辑区域按 Ctrl+V 粘贴 系统自动上传并插入Markdown图片语法 新增代码位置 模板更新：MarkdownEditor.vue:57 添加 @paste 事件处理 配置变量：MarkdownEditor.vue:122 uploadConfig 上传逻辑：MarkdownEditor.vue:306-400 处理粘贴、验证、上传和插入 状态显示：MarkdownEditor.vue:62-70 添加上传状态区域 CSS样式：MarkdownEditor.vue:480-496 添加上传状态动画 测试方法 运行应用，在编辑器中粘贴任意图片 观察底部状态显示"上传图片中..." 约800ms后，编辑器中会插入模拟的Markdown图片语法 现在你可以测试图片上传功能了！