---
title: "比较文档"
description: "比较两个 Tiptap JSON 文档并显示差异。"
canonical_url: "https://tiptap.zhcndoc.com/compare/guides/compare-documents"
---

# 比较文档

比较两个 Tiptap JSON 文档并显示差异。

使用 [`compareDocuments` 命令](https://tiptap.zhcndoc.com/compare/api-reference/commands.md#comparedocuments) 比较两个 Tiptap JSON 文档并显示变化。

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

## 比较文档

首先，创建要比较的文档。

```ts
import { Editor } from '@tiptap/core'

const editorA = new Editor()
const docA = editorA.toJSON()

const editorB = new Editor()
const docB = editorB.toJSON()
```

使用 `Compare` 扩展创建差异编辑器，该编辑器用于显示变化。然后将两个 Tiptap JSON 文档传给 `compareDocuments`。

```ts
import { Editor } from '@tiptap/core'
import { Compare } from '@tiptap-pro/compare'

// 差异编辑器
const editor = new Editor({
  extensions: [
    Compare,
    // ...other extensions
  ],
})

editor.commands.compareDocuments({
  docA,
  docB,
})
```

[`compareDocuments` 命令](https://tiptap.zhcndoc.com/compare/api-reference/commands.md#comparedocuments)会创建比较结果，并立即将变化显示为建议。

## 设置变更样式

Compare 会为当前文档 B 的内容以及文档 A 的替换内容添加 CSS 类。添加以下样式即可将变化显示为红绿差异。

```css
.compare-documents {
  --diff-document-a-color: oklch(0.396 0.141 25.723);
  --diff-document-a-group-color: oklch(0.936 0.032 17.717);
  --diff-document-a-highlight-color: oklch(80.8% 0.114 19.571);
  --diff-document-b-color: var(--black);
  --diff-document-b-group-color: oklch(0.962 0.044 156.743);
  --diff-document-b-highlight-color: oklch(87.1% 0.15 154.449);
}

/* Document B: current, added, or changed content */
.diff-suggestion,
.diff-suggestion > *,
.diff-suggestion-nested-change {
  background-color: var(--diff-document-b-highlight-color);
  color: var(--diff-document-b-color);
}

/* Keep formatting correct inside replacement content */
strong .diff-suggestion-diff {
  font-weight: normal;
}

em .diff-suggestion-diff {
  font-style: normal;
}

code:not(pre code) .diff-suggestion-diff {
  font-family: sans-serif;
}

.diff-suggestion-diff strong {
  font-weight: bold;
}

.diff-suggestion-diff em {
  font-style: italic;
}

.diff-suggestion-diff code:not(pre code) {
  font-family: monospace;
}

/* Lighter backgrounds for grouped changes */
.diff-suggestion.diff-suggestion--change-group,
.diff-suggestion.diff-suggestion--change-group > *:not(.diff-suggestion-sub-change) {
  background-color: var(--diff-document-b-group-color);
}

.diff-suggestion-sub-change {
  background-color: var(--diff-document-b-highlight-color);
}

/* Document A: removed or replacement content */
.diff-suggestion-diff,
.diff-suggestion-diff > * {
  background-color: var(--diff-document-a-highlight-color);
  color: var(--diff-document-a-color);
}

.diff-suggestion-diff.diff-suggestion-diff--change-group,
.diff-suggestion-diff.diff-suggestion-diff--change-group > *:not(.diff-suggestion-diff-sub-change) {
  background-color: var(--diff-document-a-group-color);
}

.diff-suggestion-diff-sub-change {
  background-color: var(--diff-document-a-highlight-color);
}

/* Keep table changes inside their table cells */
.diff-suggestion-diff:has(tr) {
  display: contents;
}

.diff-suggestion-diff:has(tr) td,
.diff-suggestion-diff:has(tr) th {
  background-color: var(--diff-document-a-highlight-color);
}
```

### 色觉障碍友好样式

The following stylesheet uses orange and blue to display the diff. The colorblind styles are activated when the diff is wrapped inside an element with the `colorblind-mode` class.

```scss
.colorblind-mode {
  --diff-document-a-color: oklch(0.396 0.08 55);
  --diff-document-a-group-color: oklch(0.95 0.05 70);
  --diff-document-a-highlight-color: oklch(83% 0.13 70);
  --diff-document-b-group-color: oklch(0.95 0.035 250);
  --diff-document-b-highlight-color: oklch(83% 0.1 250);
}
```