富文本怎么用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": "



 
		 
		 
		 
		
还没有评论,来说两句吧...