如何实现类Medium博客正文内嵌图片存储并保留插入顺序

核心设计逻辑 #

核心是放弃把整段文章带图片标记存在单一数据库字段的方案，将文章内容拆分为有序的独立内容块，通过内容块的排序属性保留创作者的插入顺序，图片独立存储仅在内容块中关联访问地址。

前端（React 侧）实现 #

• 编辑器选型：可选择 Tiptap、Slate.js 等支持块级编辑的富文本编辑器，也可基于 contenteditable 自行封装。创作者插入图片时，先调用后端图片上传接口获取图片的可访问地址，再将地址写入对应图片块的属性中。
• 提交的文章数据结构示例：

{
  "title": "你的文章标题",
  "contentBlocks": [
    {"type": "text", "content": "图片前的文字内容"},
    {"type": "image", "url": "/upload/2024/xxx.png", "alt": "图片说明文本"},
    {"type": "text", "content": "图片后的文字内容"}
  ]
}

• 渲染逻辑：前端请求到文章数据后，遍历 contentBlocks 数组，根据块的类型匹配对应的渲染组件，即可自动实现图文交替的排版效果。

后端（Spring Boot 侧）实现 #

• 数据库表设计：
  1. 文章主表：存储文章id、标题、作者id、发布状态、发布时间等基础元信息
  2. 文章内容块表：字段包含id、关联文章id、块类型（text/image等枚举）、块内容、排序权重，插入内容块时按前端提交的数组顺序依次赋值排序权重
• 图片存储逻辑：接收到前端上传的图片后，将图片存储到本地磁盘或对象存储服务，生成唯一的可访问路径返回给前端，不需要将图片本身存入数据库。
• 核心接口：
  • 图片上传接口：接收图片文件，返回可访问的图片URL
  • 文章保存接口：接收前端提交的文章元信息+内容块数组，分别写入文章主表和内容块表
  • 文章详情查询接口：根据文章id查询基础信息，关联查询对应的内容块列表，按排序权重升序返回给前端

方案优势 #

• 完全保留创作者插入图文的原始顺序，排版不会错乱
• 图片独立存储，不会导致数据库体积膨胀、查询效率下降
• 扩展性极强，后续如果需要支持视频、代码块、引用块等新内容类型，只需要新增块类型枚举即可，不需要调整现有表结构

内容的提问来源于stack exchange，提问作者HP . Htet Phyo Naing