---
title: "使用修订记录比较文档"
description: "将文档比较结果显示为用户可以接受或拒绝的修订记录。"
canonical_url: "https://tiptap.zhcndoc.com/compare/guides/tracked-changes"
---

# 使用修订记录比较文档

将文档比较结果显示为用户可以接受或拒绝的修订记录。

将文档比较结果显示为修订记录，让用户可以逐项审阅、接受或拒绝变化。

> **独立产品:**
>
> [修订记录](https://tiptap.zhcndoc.com/tracked-changes/getting-started/overview.md) 是与 Compare 不同的 Tiptap 产品，需要单独购买。

> **Interactive demo:** [CompareDocumentsTrackedChanges](https://embed-pro.tiptap.dev/preview/Extensions/CompareDocumentsTrackedChanges)

## Compare documents

将 `Compare` 和 `TrackedChanges` 添加到显示比较结果的编辑器中。使用 `compareDocuments` 工具比较文档，然后将结果传给 `displayChangesetAsTrackedChanges` 编辑器命令。

```ts
import { Editor } from '@tiptap/core'
import { Compare, compareDocuments } from '@tiptap-pro/compare'
import { TrackedChanges } from '@tiptap-pro/extension-tracked-changes'

// 显示差异的编辑器
const editor = new Editor({
  extensions: [
    Compare,
    TrackedChanges.configure({ enabled: true }),
    // ...other extensions shared by both documents
  ],
})

const changeset = compareDocuments({
  schema: editor.schema,
  docA, // 原始 Tiptap JSON 文档
  docB, // 变更后的 Tiptap JSON 文档
})

editor.commands.displayChangesetAsTrackedChanges({ changeset })
```

编辑器现在会将两个文档之间的变化显示为修订记录建议。使用[修订记录命令](https://tiptap.zhcndoc.com/tracked-changes/api-reference/commands.md)[接受或拒绝这些建议](https://tiptap.zhcndoc.com/tracked-changes/usage/basic-usage.md#accepting-and-rejecting-suggestions)。

> **必须启用修订记录:**
>
> 调用 `displayChangesetAsTrackedChanges` 命令前，请确保已启用修订记录。例如，可以这样初始化扩展：`TrackedChanges.configure({ enabled: true })`

## 比较版本

使用 [`compareVersions`](https://tiptap.zhcndoc.com/compare/api-reference/utilities.md#compareversions) 比较两个 Yjs 版本更新，然后可以使用修订记录建议在编辑器中显示差异。

```ts
import { compareVersions } from '@tiptap-pro/compare'

const changeset = compareVersions({
  schema: editor.schema,
  versionA, // Older Yjs update
  versionB, // Newer Yjs update
})

editor.commands.displayChangesetAsTrackedChanges({ changeset })
```

`compareVersions` 工具会捕获每个变化的用户归因数据，并将其存储在变化元数据的 `userId` 属性中。这些数据会自动传递到修订记录建议，使修订记录审阅 UI 能显示每项变化的作者。

有关获取和显示版本更新的更多信息，请参阅[比较版本](https://tiptap.zhcndoc.com/compare/guides/compare-versions.md)指南。

## 在服务器上创建修订记录

当你需要在没有编辑器实例的情况下创建包含修订记录的文档（例如在服务器路由或 Web Worker 中）时，请使用 `TrackedChangesDocumentFactory`。客户端序列化 schema 前，schema 必须包含修订记录扩展。请参阅[在服务器上比较文档](https://tiptap.zhcndoc.com/compare/guides/server-compare.md)，了解如何将文档和 schema 发送到服务器。

```ts
import {
  compareDocuments,
  deserializeSchema,
  TrackedChangesDocumentFactory,
} from '@tiptap-pro/compare'

const schema = deserializeSchema(serializedSchema)
const changeset = compareDocuments({ schema, docA, docB })

const { doc, trackedChanges } = new TrackedChangesDocumentFactory().fromChangeset({
  changeset,
  schema,
})
```

`doc` 是编码了修订记录的 Tiptap JSON 文档。`trackedChanges` 包含每项编码变化的元数据和文档范围，可用于额外的服务器端处理。