---
title: "比较文档"
description: "实时比较两个文档并可视化显示差异。"
canonical_url: "https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/advanced-guides/compare-documents"
---

# 比较文档

实时比较两个文档并可视化显示差异。

实时比较两个文档，并在编辑器中显示差异。

> **Interactive demo:** [React](https://deploy-preview-405--tiptap-pro.netlify.app/src/Extensions/AiToolkitCompareDocuments/React/)

> **适用于非 AI 场景:**
>
> 此功能无需 AI 即可使用。它可以比较任何两个文档，无论它们是否由 AI 生成。

## 指南：比较两个文档

首先调用 `startComparingDocuments` 方法。它会比较编辑器当前文档与您选择的另一个文档。该方法接收一个参数：`otherDoc`，即要比较的文档。

```ts
const toolkit = getAiToolkit(editor)

// 开始与另一个文档比较变更
toolkit.startComparingDocuments({
  otherDoc,
})
```

如果未提供 `otherDoc`，AI 工具包将从调用 `startComparingDocuments` 之时起，开始跟踪当前文档的变更，并显示变更前后的文档差异。

差异会以 [建议](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md) 的形式显示在编辑器中。将以下 CSS 文件添加到您的应用中，以将建议格式化为红绿对比差异：

```css
/* 将插入的文本高亮为绿色 */
.tiptap-ai-suggestion,
.tiptap-ai-suggestion > * {
  background-color: oklch(87.1% 0.15 154.449);
}

/* 变更组使用更浅的背景色（子变更保留更强的高亮） */
.tiptap-ai-suggestion.tiptap-ai-suggestion--change-group,
.tiptap-ai-suggestion.tiptap-ai-suggestion--change-group > *:not(.tiptap-ai-suggestion-sub-change) {
  background-color: oklch(0.962 0.044 156.743);
}

/* 高亮行内组中的子变更 */
.tiptap-ai-suggestion-sub-change {
  background-color: oklch(87.1% 0.15 154.449);
}

/* 将删除的文本高亮为红色 */
.tiptap-ai-suggestion-diff,
.tiptap-ai-suggestion-diff > * {
  background-color: oklch(80.8% 0.114 19.571);
  color: oklch(0.396 0.141 25.723);
}

/* diff 变更组使用更浅的背景色（子变更保留更强的高亮） */
.tiptap-ai-suggestion-diff.tiptap-ai-suggestion-diff--change-group,
.tiptap-ai-suggestion-diff.tiptap-ai-suggestion-diff--change-group
  > *:not(.tiptap-ai-suggestion-diff-sub-change) {
  background-color: oklch(0.936 0.032 17.717);
}

/* 高亮替换 diff 小部件中的子变更 */
.tiptap-ai-suggestion-diff-sub-change {
  background-color: oklch(80.8% 0.114 19.571);
}

/* 正确渲染表格行删除 */
.tiptap-ai-suggestion-diff:has(tr) {
  display: contents;
}

.tiptap-ai-suggestion-diff:has(tr) td,
.tiptap-ai-suggestion-diff:has(tr) th {
  background-color: oklch(80.8% 0.114 19.571);
}
```

比较文档时，变更会以建议的形式显示。若要接受或拒绝单个变更或一次性处理所有变更，请使用以下建议方法：

- [`acceptSuggestion`](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md#acceptsuggestion)：接受特定变更
- [`rejectSuggestion`](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md#rejectsuggestion)：拒绝特定变更
- [`acceptAllSuggestions`](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md#acceptallsuggestions)：接受所有变更
- [`rejectAllSuggestions`](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md#rejectallsuggestions)：拒绝所有变更

调用 `getSuggestions` 可获取文档之间的变更列表，这些变更会以 [建议](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/api-reference/suggestions.md) 的形式存储。

```ts
// 获取所有变更（作为建议）
const suggestions = toolkit.getSuggestions()
```

// 接受第一个变更

```ts
toolkit.acceptSuggestion(suggestions[0].id)

// 拒绝第一个变更
toolkit.rejectSuggestion(suggestions[0].id)

// 接受所有变更
toolkit.acceptAllSuggestions()

// 拒绝所有变更
toolkit.rejectAllSuggestions()
```

若要停止比较文档，使用 `stopComparingDocuments` 方法。它会隐藏差异视图并清除建议。

```ts
toolkit.stopComparingDocuments()
```

## 示例演示

下面是一个实时比较两个文档的演示。

> **Interactive demo:** [AiToolkitCompareDocuments](https://deploy-preview-405--tiptap-pro.netlify.app/preview/Extensions/AiToolkitCompareDocuments)

尝试点击“开始比较文档”按钮，差异即会显示。然后尝试编辑文档，观察差异的变化。

## 下一步

- [比较文档 API 参考](https://tiptap.zhcndoc.com/content-ai/capabilities/ai-toolkit/api-reference/compare-documents.md)