MDXEditor 测试页面
使用说明:
- 使用工具栏按钮进行格式化
- 支持 Markdown 快捷键(如 **粗体**、*斜体* 等)
- 可以插入表格、链接、代码块等
- 📷 图片功能:点击图片按钮插入、拖拽上传、复制粘贴图片
- 🎯 支持图片调整大小(拖拽图片角落)
- 📱 响应式工具栏:在小屏幕上自动换行,不会横向滚动
- 🕒 时间戳插入:点击时钟按钮插入当前播放器时间戳
- 点击上方按钮测试编辑器的 API 方法
🎹 快捷键测试:
测试快捷键是否正常工作:
- Cmd/Ctrl + B - 粗体(应该在编辑器内生效,不触发全局快捷键)
- Cmd/Ctrl + I - 斜体
- Cmd/Ctrl + U - 下划线
- Cmd/Ctrl + K -插入/编辑链接 🔗(重点测试项)
- Cmd/Ctrl + Z - 撤销
- Cmd/Ctrl + Y - 重做
💡 点击编辑器后尝试这些快捷键,确保它们控制编辑器而不是触发浏览器/系统的全局快捷键
🔗 链接编辑测试:
测试链接编辑功能是否正常:
- 在编辑器中找到现有链接(如 BibiGPT 官网)
- 将光标放在链接内(不要直接点击)- 应该出现编辑弹窗
- 选中一些文本,按 Cmd/Ctrl + K 创建链接
- 在链接对话框中输入 URL,查看自动建议是否出现
- 测试链接的编辑和删除功能
⚠️ 已知问题:如果点击链接直接跳转了,说明链接编辑功能还需要调整
📱 响应式工具栏测试:
测试工具栏是否正确换行:
- 🖥️ 在大屏幕上:工具栏应该水平显示,按钮紧凑排列
- 📱 在小屏幕上:工具栏应该自动换行,避免横向滚动
- 🔄 调整浏览器窗口大小,观察工具栏是否自适应
- ✅ 所有按钮都应该保持可点击状态
💡 优化内容:减少了分隔符,添加了 flex-wrap 样式,支持响应式布局
🕒 时间戳功能测试:
测试视频笔记时间戳功能:
- 在工具栏中找到时钟图标 ⏰(最右侧)
- 点击时钟按钮,会插入当前播放器的时间戳
- 插入的时间戳格式:
[00:30](timestamp:30)
- 点击插入的时间戳链接,播放器会跳转到对应时间
- 适合在看视频时记录重要时间点
🎬 使用场景:视频学习笔记、会议记录、课程总结等需要标记时间点的场景