富文本粘贴与文档上传

Backlog.md 的 Web 界面编辑器支持将外部富文本内容一键转换为 Markdown,包括从 Word、Google Docs、网页直接粘贴,以及上传 .docx 文件。同时支持截图粘贴,自动上传图片并嵌入任务正文。

粘贴为 Markdown

在任务编辑器的 Markdown 编辑区域中,直接从外部来源复制并粘贴内容,编辑器会自动识别富文本 HTML 并将其转换为干净的 Markdown。

支持来源

来源 转换内容
Microsoft Word 段落、标题、列表、表格、粗体/斜体/下划线
Google Docs 段落、标题、列表、表格、格式
Excel 表格(含表头识别)
网页 HTML 结构、链接、列表、表格
截图 image/png 图片,自动上传

粘贴流程

  1. 在外部应用中选中内容并复制
  2. 在 Backlog.md 编辑器中按 Ctrl+V(或 Cmd+V)
  3. 编辑器自动读取剪贴板中的 text/html
  4. 清理 Word/Excel 特定标记(噪声标签、内联样式、mso-list 等)
  5. 如有图片,提取并上传至临时目录
  6. Turndown 将清理后的 HTML 转为 Markdown
  7. 转换结果插入编辑器光标位置

如果剪贴板中不含 HTML(纯文本),编辑器会回退到原生粘贴行为,不做额外处理。

上传 Word 文档

除剪贴板粘贴外,编辑器还支持直接上传 .docx 文件。这对于包含大量图片或复杂格式的文档尤其有用。

操作方式

在任务编辑器中:

  • 点击编辑器工具栏的「上传 Word」按钮,选择本地 .docx 文件
  • 或将 .docx 文件直接拖放到编辑器区域

转换流程

  1. 前端将 .docx 文件通过 POST /api/docx/convert 发送至后端
  2. 后端使用 mammoth 库解析文档,提取文本内容为 HTML
  3. 文档中的内嵌图片被提取并上传至 backlog/assets/.temp/
  4. 后端返回原始 HTML、图片列表和转换警告
  5. 前端使用与「粘贴为 Markdown」完全相同的 cleanHtml + Turndown 流水线将 HTML 转为 Markdown
  6. 图片引用以 /assets/.temp/{uuid}.png 形式嵌入正文

统一流水线保证一致性

Word 文档上传和富文本粘贴共享同一套前端转换逻辑,确保两者输出格式一致。复杂表格、列表嵌套等场景下,统一流水线避免了后端直接转换可能产生的格式差异。

图片处理

截图粘贴

直接粘贴截图(如 QQ/微信/系统截图工具)时:

  • 图片以 image/png blob 形式上传
  • 保存至 backlog/assets/.temp/{uuid}.png
  • 编辑器中显示预览图

网页图片

粘贴来自网页的内容中包含 <img> 标签时:

  • Data URI 图片:提取 base64 数据,上传至临时目录
  • HTTP(S) URL 图片:后端安全下载后上传
  • file:// 本地路径:被拒绝(浏览器安全限制)

保存时提升(Promote)

所有临时图片(包括粘贴截图和 Word 文档提取的图片)在保存任务时自动提升:

  1. 前端扫描 Markdown 中的 /assets/.temp/ 引用
  2. 调用 POST /api/assets/promote 批量移动文件
  3. 图片从 .temp/ 迁移到 paste/ 永久目录
  4. 前端更新 Markdown 中的 URL 映射后执行保存

临时目录中的过期文件(超过 30 分钟)会在服务器启动时自动清理。

限制与注意事项

  • 文件大小:单文件超过 20MB 会返回错误提示
  • 格式支持:仅 .docx 格式支持文件上传,旧版 .doc 需先转换
  • 损坏文档:无法解析的文档会显示可读错误消息,不会崩溃
  • 图片大小:单张图片若超过大小限制,可能被跳过或导致整体失败(取决于策略配置)

results matching ""

    No results matching ""