---
title: "HTML 实用工具"
description: "使用 Tiptap 的 HTML 实用工具将 JSON 渲染为 HTML，并在没有编辑器实例的情况下将 HTML 转换为 JSON。更多内容请见文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/api/utilities/html"
---

# HTML 实用工具

使用 Tiptap 的 HTML 实用工具将 JSON 渲染为 HTML，并在没有编辑器实例的情况下将 HTML 转换为 JSON。更多内容请见文档！

HTML 实用工具可以帮助将 JSON 内容渲染为 HTML，并在没有编辑器实例的情况下从 HTML 生成 JSON，适合服务器端操作。所需的仅仅是 JSON 或 HTML 字符串，以及扩展列表。

## 从 JSON 生成 HTML

给定一个 JSON 对象，表示一个 ProseMirror 文档，`generateHTML` 函数将返回一个 `string` 对象，表示 JSON 内容。该函数接受两个参数：JSON 对象和扩展列表。

```js
/* 仅限浏览器使用 - 请参见下面的服务器端兼容包 */
import { generateHTML } from '@tiptap/core'

// 从 JSON 生成 HTML
generateHTML(
  {
    type: 'doc',
    content: [{ type: 'paragraph', content: [{ type: 'text', text: '仅在浏览器上' }] }],
  },
  [
    Document,
    Paragraph,
    Text,
    Bold,
    // 其他扩展 …
  ],
)
// `<p>仅在浏览器上</p>`

/* 服务器或浏览器使用 - 请参见上面浏览器专用兼容包 (更少的 JS) */
import { generateHTML } from '@tiptap/html'

// 从 JSON 生成 HTML
generateHTML(
  {
    type: 'doc',
    content: [
      { type: 'paragraph', content: [{ type: 'text', text: '在服务器上，或在浏览器上' }] },
    ],
  },
  [
    Document,
    Paragraph,
    Text,
    Bold,
    // 其他扩展 …
  ],
)
// `<p>在服务器上，或在浏览器上</p>`
```

> **注意:**
>
> 有两个可用的导出：来自 `@tiptap/core` 的 `generateHTML` 和来自 `@tiptap/html` 的 `generateHTML`。
> 前者仅供浏览器使用，后者可以在服务器或浏览器上使用。确保根据您的用例使用正确的一个。在服务器端，使用虚拟 DOM 来生成 HTML。因此，使用 `@tiptap/core` 可以减少代码量，如果您不需要服务器端功能。

> **Interactive demo:** [GenerateHTML](https://embed.tiptap.dev/preview/GuideContent/GenerateHTML)

## 从 HTML 生成 JSON

给定一个 HTML 字符串，`generateJSON` 函数将返回一个 JSON 对象，表示 HTML 内容作为 ProseMirror 文档。该函数接受两个参数：HTML 字符串和扩展列表。

```js
/* 仅限浏览器使用 - 请参见下面的服务器端兼容包 */
import { generateJSON } from '@tiptap/core'

// 从 HTML 生成 JSON
generateJSON(`<p>仅在浏览器上</p>`, [
  Document,
  Paragraph,
  Text,
  Bold,
  // 其他扩展 …
])
// { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: '仅在浏览器上' }] }] }

/* 服务器或浏览器使用 - 请参见上面浏览器专用兼容包 (更少的 JS) */
import { generateJSON } from '@tiptap/html'

// 从 HTML 生成 JSON
generateJSON(`<p>在服务器上，或在浏览器上</p>`, [
  Document,
  Paragraph,
  Text,
  Bold,
  // 其他扩展 …
])
// { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: '在服务器上，或在浏览器上' }] }] }
```

> **注意:**
>
> 有两个可用的导出：来自 `@tiptap/core` 的 `generateJSON` 和来自 `@tiptap/html` 的 `generateJSON`。
> 前者仅供浏览器使用，后者可以在服务器或浏览器上使用。确保根据您的用例使用正确的一个。在服务器端，使用虚拟 DOM 来生成 HTML。因此，使用 `@tiptap/core` 可以减少代码量，如果您不需要服务器端功能。

> **Interactive demo:** [GenerateJSON](https://embed.tiptap.dev/preview/GuideContent/GenerateJSON)

## 源代码

[packages/html/](https://github.com/ueberdosis/tiptap/blob/main/packages/html/)