---
title: "使用 Tiptap 进行输出和内容处理"
description: "管理 Tiptap 编辑器中的内容格式，并使用 Y.js 导出为 JSON 和 HTML，以实现高级功能。详细信息请见文档！"
canonical_url: "https://tiptap.zhcndoc.com/guides/output-json-html"
---

# 使用 Tiptap 进行输出和内容处理

管理 Tiptap 编辑器中的内容格式，并使用 Y.js 导出为 JSON 和 HTML，以实现高级功能。详细信息请见文档！

您可以将内容存储为 JSON 对象或传统的 HTML 字符串。两者均可正常使用。当然，您可以将这两种格式传递给编辑器以恢复您的内容。以下是一个交互示例，当文档发生更改时，它将内容导出为 HTML 和 JSON：

## 导出

### 选项 1：JSON

JSON 可能更容易遍历，比如查找提及，而且它更像是 Tiptap 在底层使用的格式。无论如何，如果您想使用 JSON 存储内容，我们提供了一种方法来以 JSON 格式检索内容：

```js
const json = editor.getJSON()
```

您可以将其存储在数据库中（或发送到 API），并最初恢复文档：

```js
new Editor({
  content: {
    type: 'doc',
    content: [
      // …
    ],
  },
})
```

或者如果您需要等待某个操作，可以通过编辑器实例稍后执行：

```js
editor.commands.setContent({
  type: 'doc',
  content: [
    // …
  ],
})
```

这里是一个交互示例，您可以在其中看到这一操作：

> **Interactive demo:** [exportjson](https://embed.tiptap.dev/preview/guidecontent/exportjson?hideSource=true)

### 选项 2：HTML

HTML 可以轻松地在其他地方渲染，例如在电子邮件中，它被广泛使用，所以在某个时刻切换编辑器可能会更容易。无论如何，每个编辑器实例提供了一种方法，可以从当前文档中获取 HTML：

```js
const html = editor.getHTML()
```

然后，这可以用于最初恢复文档：

```js
new Editor({
  content: `<p>示例文本</p>`,
})
```

或者，如果您想稍后恢复内容（例如，在 API 调用完成后），也可以做到这一点：

```js
editor.commands.setContent(`<p>示例文本</p>`)
```

使用这个交互示例进行实验：

> **Interactive demo:** [exporthtml](https://embed.tiptap.dev/preview/guidecontent/exporthtml?hideSource=true)

### 选项 3：Y.js

我们的编辑器对 Y.js 提供了顶级支持，非常适合添加 [实时协作、离线编辑或设备间同步](https://tiptap.zhcndoc.com/collaboration/getting-started/overview.md) 等功能。

在内部，Y.js 存储所有更改的历史记录。这可能存储在浏览器、服务器上、与其他连接的客户端同步，或者在 USB 闪存驱动器上。但重要的是要知道 Y.js 需要这些存储的更改。简单的 JSON 文档不足以合并更改。

当然，您可以导入现有的 JSON 文档以开始，并从 Y.js 中获取 JSON，但这更像是输入/输出格式。它不会成为您的唯一来源。这一点在添加 Y.js 以实现上述用例时非常重要。

话虽如此，Y.js 的功能很强大，我们即将提供一个出色的后端，使所有操作都变得轻而易举。

### Markdown

Tiptap 已经为 Markdown 提供了导入、导出和 REST API 转换（包括 GitHub 风格的 Markdown）。这让您可以：

- **将 `.md` 或 GFM** 文件导入 Tiptap 编辑器，将其转换为 Tiptap JSON
- **导出** Tiptap JSON 为标准 Markdown 或 GFM，让您将编辑器内容保存或分享为 `.md` 文件。
- **集成服务器端**（无需编辑器）通过我们的转换 REST API 发送或检索 `.md` 内容。

See [Markdown Conversion](https://tiptap.zhcndoc.com/conversion/import/markdown/rest-api.md) for details on how to handle other Markdown features, plus examples for both in-editor workflows and server-side usage.

**Tiptap v3 将深化对 Markdown 的支持。** 我们致力于使 Markdown 更加稳健并更易于集成，以满足高级（AI）用例。

如果您希望将 ProseMirror JSON 转换为 Markdown，可以使用 `@tiptap/static-renderer` 包，该包可以将 ProseMirror JSON 转换为 Markdown。有关更多信息和示例，请参见它的 [文档](https://tiptap.zhcndoc.com/editor/api/utilities/static-renderer.md)。

## 监听更改

如果您希望在人们写作时持续存储更新的内容，可以 [挂钩事件](https://tiptap.zhcndoc.com/editor/api/events.md)。这里是一个可能的示例：

```js
const editor = new Editor({
  // 初始内容
  content: `<p>示例内容</p>`,

  // 在每次更改时触发
  onUpdate: ({ editor }) => {
    const json = editor.getJSON()
    // 在这里将内容发送到 API
  },
})
```

## 渲染

### 选项 1：只读实例的 Tiptap

要渲染保存的内容，将编辑器设置为只读。这样您就可以实现与编辑器中的完全相同的渲染，而无需重复您的 CSS 和其他代码。

> **Interactive demo:** [ReadOnly](https://embed.tiptap.dev/preview/GuideContent/ReadOnly?inline=false\&hideSource=false)

### 选项 2：从 ProseMirror JSON 生成 HTML

如果您需要在服务器端渲染内容，例如生成已在 Tiptap 中编写的博文的 HTML，您可能希望在没有实际编辑器实例的情况下完成此操作。

这就是 `generateHTML()` 的用途。它是一个助手函数，可以在没有实际编辑器实例的情况下渲染 HTML。

> **Interactive demo:** [GenerateHTML](https://embed.tiptap.dev/preview/GuideContent/GenerateHTML?inline=false\&hideSource=false)

顺便说一下，另一种方式也是可行的。以下示例展示了如何从 HTML 生成 JSON。

> **Interactive demo:** [GenerateJSON](https://embed.tiptap.dev/preview/GuideContent/GenerateJSON?inline=false\&hideSource=false)

### 选项 3：静态渲染器

从 ProseMirror JSON 生成 HTML、React 元素或 Markdown

如果您希望以静态方式渲染内容，例如在博文中，可以使用 `@tiptap/static-renderer` 包。它可以将 ProseMirror JSON 转换为 HTML、React 元素或 Markdown。

```bash
npm install @tiptap/static-renderer
```

要了解有关静态渲染器的更多信息，请查看 [静态渲染器文档](https://tiptap.zhcndoc.com/editor/api/utilities/static-renderer.md)。

> **Interactive demo:** [staticrendering](https://deploy-preview-6012--tiptap-embed.netlify.app/preview/examples/staticrendering?inline=false\&hideSource=false)

## 迁移

### 从 Draft.js

如果您正在从 Draft.js 迁移到 Tiptap，您可能已经将内容存储为 JSON。这很好，因为 Tiptap 可以通过 [draft-js-to-tiptap 包](https://github.com/ueberdosis/draft-js-to-tiptap) 处理它。有关更多信息和示例，请参见它的 [文档](https://github.com/ueberdosis/draft-js-to-tiptap/blob/main/README.md)。

### 其他

如果您正在将现有内容迁移到 Tiptap，我们建议将您现有的输出转换为 HTML。这可能是将初始内容引入 Tiptap 的最佳格式，因为 ProseMirror 确保其中没有错误。即使有一些不允许的标签或属性（基于您的配置），Tiptap 也会默默地将它们剔除。

我们将逐步提供一些案例以帮助实现这一点，例如我们提供一个 PHP 包来将 HTML 转换为兼容的 JSON 结构：[ueberdosis/prosemirror-to-html](https://github.com/ueberdosis/html-to-prosemirror)。

[与我们分享您的经验！](mailto:humans@tiptap.dev) 我们希望在这里添加更多信息。

## 安全

没有理由因为安全原因而使用其中一种格式。如果有人想向您的服务器发送恶意内容，无论是 JSON 还是 HTML 都无关紧要。您使用 Tiptap 与否都无关紧要。您应该始终验证用户输入。