MDXEditor 测试页面

使用说明:

  • 使用工具栏按钮进行格式化
  • 支持 Markdown 快捷键(如 **粗体**、*斜体* 等)
  • 可以插入表格、链接、代码块等
  • 📷 图片功能:点击图片按钮插入、拖拽上传、复制粘贴图片
  • 🎯 支持图片调整大小(拖拽图片角落)
  • 📱 响应式工具栏:在小屏幕上自动换行,不会横向滚动
  • 🕒 时间戳插入:点击时钟按钮插入当前播放器时间戳
  • 点击上方按钮测试编辑器的 API 方法

🎹 快捷键测试:

测试快捷键是否正常工作:

  • Cmd/Ctrl + B - 粗体(应该在编辑器内生效,不触发全局快捷键)
  • Cmd/Ctrl + I - 斜体
  • Cmd/Ctrl + U - 下划线
  • Cmd/Ctrl + K -插入/编辑链接 🔗(重点测试项)
  • Cmd/Ctrl + Z - 撤销
  • Cmd/Ctrl + Y - 重做

💡 点击编辑器后尝试这些快捷键,确保它们控制编辑器而不是触发浏览器/系统的全局快捷键

🔗 链接编辑测试:

测试链接编辑功能是否正常:

  1. 在编辑器中找到现有链接(如 BibiGPT 官网)
  2. 将光标放在链接内(不要直接点击)- 应该出现编辑弹窗
  3. 选中一些文本,按 Cmd/Ctrl + K 创建链接
  4. 在链接对话框中输入 URL,查看自动建议是否出现
  5. 测试链接的编辑和删除功能

⚠️ 已知问题:如果点击链接直接跳转了,说明链接编辑功能还需要调整

📱 响应式工具栏测试:

测试工具栏是否正确换行:

  • 🖥️ 在大屏幕上:工具栏应该水平显示,按钮紧凑排列
  • 📱 在小屏幕上:工具栏应该自动换行,避免横向滚动
  • 🔄 调整浏览器窗口大小,观察工具栏是否自适应
  • ✅ 所有按钮都应该保持可点击状态

💡 优化内容:减少了分隔符,添加了 flex-wrap 样式,支持响应式布局

🕒 时间戳功能测试:

测试视频笔记时间戳功能:

  1. 在工具栏中找到时钟图标 ⏰(最右侧)
  2. 点击时钟按钮,会插入当前播放器的时间戳
  3. 插入的时间戳格式:[00:30](timestamp:30)
  4. 点击插入的时间戳链接,播放器会跳转到对应时间
  5. 适合在看视频时记录重要时间点

🎬 使用场景:视频学习笔记、会议记录、课程总结等需要标记时间点的场景