# @contentful/rich-text-html-renderer 中文文档

规范地址：https://npmcn.com/package/%40contentful/rich-text-html-renderer/

版本：17\.2\.3
npm 元数据更新时间：2026-07-20T07:15:40.261Z
中文译文更新时间：2026-11-10T16:36:00.924Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40contentful/rich-text-html-renderer
原文对照：https://npmcn.com/package/%40contentful/rich-text-html-renderer/?lang=original
项目主页：https://github.com/contentful/rich-text#readme
源码仓库：https://github.com/contentful/rich-text

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：152 kB，64 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=20\.0\.0
- 运行依赖：1 个
- 首次发布：2018-10-12T13:57:59.568Z
- 最新版本发布：2026-07-20T07:15:40.037Z
- 近 30 天下载量：999443（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：99（近 12 个月 4 个）

## 中文简介

内容丰富的文本字段类型的 HTML 渲染器.

## 安装

```sh
npm install @contentful/rich-text-html-renderer
```

也可以使用：`pnpm add @contentful/rich-text-html-renderer`、`yarn add @contentful/rich-text-html-renderer`、`bun add @contentful/rich-text-html-renderer`

## README

# 富文本- html- 转发器

内容丰富的文本字段类型的 HTML 渲染器.

## 安装

使用 [无](http://npmjs.org/)数字 :

```sh
npm install @contentful/rich-text-html-renderer
```

使用 [线条](https://yarnpkg.com/)数字 :

```sh
yarn add @contentful/rich-text-html-renderer
```

## 使用量

```javascript
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello world!',
          marks: [],
        },
      ],
    },
  ],
};

documentToHtmlString(document); // -> <p>Hello world!</p>
```

```javascript
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }],
        },
      ],
    },
  ],
};

documentToHtmlString(document); // -> <p><b>Hello</b><u> world!</u></p>
```

也可以通过标记和节点的自定义渲染器作为这样的可选参数:

```javascript
import { BLOCKS, MARKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'paragraph',
      data:{},
      content: [
        {
          nodeType: 'text',
          value: 'Hello',
          marks: [{ type: 'bold' }],
          data: {}
        },
        {
          nodeType: 'text',
          value: ' world!',
          marks: [{ type: 'italic' }]
          data: {}
        },
      ],
    },
  ]
};

const options = {
  renderMark: {
    [MARKS.BOLD]: text => `<custom-bold>${text}<custom-bold>`
  },
  renderNode: {
    [BLOCKS.PARAGRAPH]: (node, next) => `<custom-paragraph>${next(node.content)}</custom-paragraph>`
  }
}

documentToHtmlString(document, options);
// -> <custom-paragraph><custom-bold>Hello</custom-bold><u> world!</u></custom-paragraph>
```

最后,但并非最不重要的是,您可以通过嵌入式条目的自定义渲染组件:

```javascript
import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  data: {},
  content: [
    {
      nodeType: 'embedded-entry-block',
      data: {
        target: (...)Link<'Entry'>(...);
      },
    },
  ]
};

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => `<custom-component>${customComponentRenderer(node)}</custom-component>`
  }
}

documentToHtmlString(document, options);
// -> <custom-component>(...)Link<'Entry'>(...)</custom-component>
```

这个 `renderNode` 键应为以下之一 `BLOCKS` 财务报告和审定财务报表 `INLINES` 定义属性 [`@contentful/rich-text-types`](https://www.npmjs.com/package/@contentful/rich-text-types)数字 :

-   `BLOCKS`
    
    -   `DOCUMENT`
    -   `PARAGRAPH`
    -   `HEADING_1`
    -   `HEADING_2`
    -   `HEADING_3`
    -   `HEADING_4`
    -   `HEADING_5`
    -   `HEADING_6`
    -   `UL_LIST`
    -   `OL_LIST`
    -   `LIST_ITEM`
    -   `QUOTE`
    -   `HR`
    -   `EMBEDDED_ENTRY`
    -   `EMBEDDED_ASSET`
    -   `EMBEDDED_RESOURCE`
-   `INLINES`
    
    -   `EMBEDDED_ENTRY` (这与 `BLOCKS.EMBEDDED_ENTRY`(中文(简体) )
    -   `EMBEDDED_RESOURCE`
    -   `HYPERLINK`
    -   `ENTRY_HYPERLINK`
    -   `ASSET_HYPERLINK`
    -   `RESOURCE_HYPERLINK`

这个 `renderMark` 键应为以下之一 `MARKS` 定义属性 [`@contentful/rich-text-types`](https://www.npmjs.com/package/@contentful/rich-text-types)数字 :

-   `BOLD`
-   `ITALIC`
-   `UNDERLINE`
-   `CODE`
-   `SUPERSCRIPT`
-   `SUBSCRIPT`
-   `STRIKETHROUGH`

#### 保留空白

在您的 HTML 渲染选项中, 您可以使用 `preserveWhitespace` 布尔旗。 设定为 `true`,此标记可确保所渲染的 HTML 中保存内容丰富的内容中的空格和换行符。 具体来说,它用 `&nbsp;` 并使用 `<br />` 标签。 这种能力特别有利于包含空间和换行的具体格式要求的内容.

```javascript
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';

const document = {
  nodeType: 'document',
  content: [
    {
      nodeType: 'paragraph',
      content: [
        {
          nodeType: 'text',
          value: 'Hello     world!',
          marks: [],
        },
      ],
    },
  ],
};

const options = {
  preserveWhitespace: true,
};

documentToHtmlString(document, options);
// -> <p>Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world!</p>
```

有了这个配置,HTML输出保留了"Hello"和"world!"之间发现的空格.

## 常见问题

### @contentful/rich-text-html-renderer 是什么？

内容丰富的文本字段类型的 HTML 渲染器\.

### 如何安装 @contentful/rich-text-html-renderer？

在项目目录运行 npm install @contentful/rich-text-html-renderer，或使用 pnpm add / yarn add / bun add。

### @contentful/rich-text-html-renderer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @contentful/rich-text-html-renderer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @contentful/rich-text-html-renderer 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @contentful/rich-text-html-renderer 可以商用吗？

@contentful/rich-text-html-renderer 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @contentful/rich-text-html-renderer 的下载量有多少？

根据 npm 官方下载统计，@contentful/rich-text-html-renderer 在 2026/10/11 – 2026/11/09 这 30 天内被下载 999,443 次，日均约 33,315 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @contentful/rich-text-html-renderer 还在维护吗？

最新版本 17\.2\.3 发布于 2026/07/20（3 个月前）；至今共发布 99 个版本，其中过去 12 个月发布了 4 个；首次发布于 2018/10/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。