富文本怎么用json传输

富文本怎么用JSON传输：格式设计与实践指南

富文本（Rich Text）是指包含文本格式（如加粗、斜体、颜色）、图片、链接、列表等复杂内容的文本数据，在前后端分离的架构中，富文本内容通常需要通过JSON进行传输，本文将详细介绍富文本JSON传输的核心设计思路、常见格式方案、实践案例及注意事项，帮助开发者高效实现富文本数据的跨平台交互。

富文本JSON传输的核心设计原则

富文本的核心是“结构化内容”，其JSON传输设计需遵循以下原则：

结构化与可解析性

富文本的本质是“带标签的树形结构”，JSON需能准确还原这种结构，一段“加粗的红色文字”应明确标识出“加粗”“红色”等格式属性，避免丢失语义。

兼容性与扩展性

不同平台（Web、iOS、Android）对富文本的解析能力可能存在差异，JSON格式需兼顾通用性，同时支持未来扩展（如新增视频、表格等元素类型）。

轻量化与高效性

避免冗余数据,减少JSON体积，提升传输效率，用简短的类型标识（如"bold"）代替长文本描述，用相对路径或CDN链接引用图片资源。

常见富文本JSON格式方案

目前业界主流的富文本JSON格式主要有以下三种,各有适用场景：

HTML转义格式（简单直接）

核心思路：将富文本内容转换为HTML字符串，再对HTML进行JSON转义（如替换<为\u003c），直接作为JSON的一个字段值。

示例：

{
  "content": "\u003cp\u003e这是一段\u003cb\u003e加粗\u003c/b\u003e\u003cspan style=\"color:red;\"\u003e红色\u003c/span\u003e文字，包含\u003ca href=\"https://example.com\"\u003e链接\u003c/a\u003e和\u003cimg src=\"image.jpg\" alt=\"图片\"/\u003e，\u003c/p\u003e"
}

优点：

实现简单：前端可直接用innerHTML渲染，后端无需复杂解析；
兼容性好：所有现代浏览器和多数客户端框架均支持HTML渲染。

缺点：

安全风险：若未对HTML进行过滤，可能存在XSS攻击（如恶意脚本<script>alert(1)</script>）；
扩展性差：难以解析非HTML元素（如自定义组件、数学公式）；
体积较大：HTML标签冗余，传输效率较低。

适用场景：对安全性要求较低、仅需基础格式（加粗、颜色、链接）的场景，如简单评论、日志记录。

Delta格式（结构化与可编辑性）

核心思路：通过“操作指令”描述富文本的格式变化，类似文本编辑器的“操作日志”，Delta格式由ops数组组成，每个元素代表一个文本片段及其格式，或一个嵌入元素（如图片）。

官方规范：参考Quill Delta，已成为富文本编辑器的通用数据格式。

示例：

{
  "ops": [
    { "insert": "这是一段", "attributes": { "bold": true } },
    { "insert": "红色", "attributes": { "color": "#ff0000" } },
    { "insert": "文字，包含", "attributes": null },
    { 
      "insert": "链接", 
      "attributes": { "link": "https://example.com" } 
    },
    { "insert": "和", "attributes": null },
    { 
      "insert": { "image": "https://cdn.example.com/image.jpg" }, 
      "attributes": { "alt": "图片" } 
    },
    { "insert": "。", "attributes": null }
  ]
}

字段解析：

insert：必填，表示插入的内容（文本或嵌入对象）；
attributes：可选，格式属性（如bold、color、link），嵌入对象时描述元素属性（如alt）；
嵌入对象：通过{ "type": "value" }表示（如图片用"image": "url"）。

优点：

结构化清晰：可精确还原每个文本片段的格式，支持增量编辑；
安全性高：无HTML标签，避免XSS风险；
扩展性强：可自定义嵌入元素（如视频、公式）。

缺点：

解析复杂：前端需解析ops数组并动态渲染，不如HTML直接；
学习成本：需理解Delta的指令逻辑。

适用场景：对格式要求严格、支持实时编辑的富文本场景，如在线文档、评论编辑器。

自定义树形结构（灵活可控）

核心思路：根据业务需求设计树形结构，每个节点代表一个文本块或嵌入元素，通过type区分节点类型，children表示子节点（支持嵌套）。

示例（支持段落、文本、图片、列表）：

{
  "type": "doc",
  "children": [
    {
      "type": "paragraph",
      "children": [
        {
          "type": "text",
          "text": "这是一段",
          "marks": [
            { "type": "bold" },
            { "type": "color", "attrs": { "color": "#ff0000" } }
          ]
        },
        {
          "type": "text",
          "text": "红色文字，包含",
          "marks": []
        },
        {
          "type": "link",
          "text": "链接",
          "url": "https://example.com"
        },
        {
          "type": "text",
          "text": "和",
          "marks": []
        },
        {
          "type": "image",
          "url": "https://cdn.example.com/image.jpg",
          "alt": "图片",
          "width": 300,
          "height": 200
        },
        {
          "type": "text",
          "text": "。",
          "marks": []
        }
      ]
    },
    {
      "type": "list",
      "listType": "ordered",
      "children": [
        {
          "type": "listItem",
          "children": [
            { "type": "text", "text": "列表项1", "marks": [] }
          ]
        },
        {
          "type": "listItem",
          "children": [
            { "type": "text", "text": "列表项2", "marks": [] }
          ]
        }
      ]
    }
  ]
}

字段解析：

type：节点类型（如paragraph、text、image、list）；
text：文本节点的纯文本内容；
marks：文本格式（如加粗、颜色），每个mark是一个格式对象；
url/src：嵌入元素的资源链接；
children：子节点数组，支持嵌套（如段落包含多个文本节点）。

优点：

灵活性高：完全自定义结构，适配复杂业务需求（如多级标题、自定义组件）；
可读性强：树形结构直观，便于调试和扩展。

缺点：

设计成本高：需提前定义节点类型和字段规范；
兼容性依赖：前端需根据自定义结构实现解析逻辑。

适用场景：复杂富文本业务（如文档编辑器、电子书），需支持自定义元素和深度嵌套。

实践案例：博客文章的富文本传输

假设一个博客系统,文章内容包含标题、正文（文字+图片+列表）、作者信息，采用Delta格式传输正文，整体JSON结构如下：

{
  "id": "article_123",: "如何设计富文本JSON格式",
  "author": "张三",
  "publishTime": "2023-10-01T12:00:00Z",
  "content": {
    "ops": [
      { "insert": "引言\n", "attributes": { "header": 1 } },
      { "insert": "富文本传输是Web开发中的常见需求，本文将介绍三种主流JSON格式方案，\n\n", "attributes": null },
      { "insert": "方案一：HTML转义格式\n", "attributes": { "header": 2 } },
      { "insert": "将HTML字符串直接转义后放入JSON，适合简单场景，优点是实现简单，缺点是存在XSS风险，\n\n", "attributes": null },
      { 
        "insert": { "image": "