13 KiB
13 KiB
Monaco Editor 文档对比能力与限制说明
📖 概述
本文档详细说明 Monaco Editor 在比较两份 Word 文档时的能力和限制。Monaco Editor 是 VS Code 的核心编辑器组件，主要用于纯文本对比，而非格式化文档对比。
核心结论：Monaco Editor 只能识别和对比纯文本内容的差异，无法识别字号、字体、颜色、表格结构等格式化信息。
✅ Monaco Editor 能做什么
1. 纯文本内容对比
- ✅ 逐行对比文字内容的增删改
- ✅ 识别文本的新增、删除、修改
- ✅ 字符级精准差异高亮（行内哪些字符被修改）
- ✅ 区分不同类型的变更（新增、删除、修改）
示例：
- 总金额：人民币壹佰万元整（¥1,000,000.00）
+ 总金额：人民币壹佰伍拾万元整（¥1,500,000.00）
2. 差异导航功能
- ✅ 跳转到上一处/下一处差异
- ✅ 统计差异数量（显示总共有多少处差异）
- ✅ 自动滚动到差异位置
- ✅ 差异位置高亮显示
- ✅ 显示当前查看的差异序号（如 3/15）
功能按钮：
- 「上一处差异」- 跳转到前一个修改位置
- 「下一处差异」- 跳转到后一个修改位置
- 差异计数器 - 显示「发现 X 处差异」
3. 差异可视化
并排显示模式（Side-by-Side）
- 左侧：原始文档
- 右侧：修改后的文档
- 差异行用竖线连接
内联显示模式（Inline）
- 上下排列显示差异
- 删除内容在上，新增内容在下
颜色高亮说明
- 🔴 红色背景：原始版本的内容（在新版本中被删除或修改前的内容）
- 🟢 绿色背景：修改版本的内容（新增或修改后的内容）
- 🟡 深色高亮：行内具体修改的字符差异（字符级对比）
4. 基本文本操作
- ✅ 搜索功能（Ctrl+F）
- ✅ 自动换行（wordWrap）
- ✅ 行号显示
- ✅ 缩略图导航（Minimap）
- ✅ 鼠标滚轮缩放
- ✅ 只读模式（防止误编辑）
- ✅ 语法高亮（支持多种编程语言）
5. 文本提取能力（配合其他库）
项目中集成的文本提取方案：
Word 文档提取（使用 mammoth 库）
import mammoth from 'mammoth';
async function extractTextFromWord(docUrl: string): Promise<string> {
const response = await fetch(docUrl);
const arrayBuffer = await response.arrayBuffer();
const textResult = await mammoth.extractRawText({ arrayBuffer });
return textResult.value; // 纯文本内容
}
提取结果：
- ✅ 提取段落文字
- ✅ 提取表格内的文字（但不保留表格结构）
- ✅ 提取列表内容（但不保留序号和缩进）
- ❌ 不提取图片
- ❌ 不提取页眉页脚
PDF 文档提取（使用 pdfjs 库）
import * as pdfjs from 'pdfjs-dist';
async function extractTextFromPdf(pdfUrl: string): Promise<string> {
const pdf = await pdfjs.getDocument(pdfUrl).promise;
let fullText = '';
for (let i = 1; i <= pdf.numPages; i++) {
const page = await pdf.getPage(i);
const textContent = await page.getTextContent();
const pageText = textContent.items
.map(item => item.str)
.join(' ');
fullText += `\n========== 第 ${i} 页 ==========\n${pageText}\n`;
}
return fullText;
}
提取结果：
- ✅ 提取文本型 PDF 的文字
- ⚠️ 扫描版 PDF 提取效果差（需要 OCR）
- ❌ 不提取图片和图表
❌ Monaco Editor 不能做什么
1. 格式识别（完全无法识别）
| 格式类型 | 是否支持 | 说明 |
|---|---|---|
| 字号大小 | ❌ | 无法识别 12pt → 14pt 的变化 |
| 字体 | ❌ | 无法识别宋体 → 黑体的变化 |
| 加粗/斜体/下划线 | ❌ | 所有文本样式都会丢失 |
| 字体颜色 | ❌ | 无法识别黑色 → 红色的变化 |
| 背景颜色/高亮 | ❌ | 无法识别文本高亮标记 |
示例对比：
原始 Word 文档：
第一条 合同双方（加粗、14pt、黑体）
Monaco 提取后：
第一条 合同双方（纯文本、无格式）
2. 排版结构（无法识别）
| 排版元素 | 是否支持 | 说明 |
|---|---|---|
| 段落对齐方式 | ❌ | 左对齐/居中/右对齐/两端对齐 |
| 行间距 | ❌ | 1.5倍行距 → 2倍行距的变化 |
| 段前段后间距 | ❌ | 段落间距设置 |
| 首行缩进 | ❌ | 2字符缩进等 |
| 页边距 | ❌ | 上下左右边距 |
| 分页符 | ❌ | 强制分页 |
3. 复杂元素（完全丢失）
| 文档元素 | 是否支持 | Monaco 处理方式 |
|---|---|---|
| 表格 | ❌ | 只提取表格内的文字，单元格结构丢失 |
| 图片 | ❌ | 完全无法显示，跳过 |
| 图表 | ❌ | Excel 图表、SmartArt 等完全丢失 |
| 页眉/页脚 | ❌ | 不提取 |
| 脚注/尾注 | ❌ | 不提取 |
| 批注 | ❌ | Word 批注内容不提取 |
| 修订标记 | ❌ | Word 修订模式的标记丢失 |
表格示例：
原始 Word 表格：
┌────────┬────────┬────────┐
│ 项目 │ 数量 │ 单价 │
├────────┼────────┼────────┤
│ A产品 │ 100 │ 500 │
└────────┴────────┴────────┘
Monaco 提取后：
项目 数量 单价
A产品 100 500
4. 样式和主题（无法识别）
- ❌ Word 样式表（标题1、标题2、正文等）
- ❌ 主题颜色（Office 主题色）
- ❌ 模板格式
- ❌ 多级列表样式
5. 文档元数据（不支持）
- ❌ 作者信息
- ❌ 创建/修改时间
- ❌ 修订历史（谁在何时修改了什么）
- ❌ 文档属性（标题、主题、关键字等）
- ❌ 文档保护/密码
6. Office 特有功能（不支持）
| 功能 | 是否支持 | 说明 |
|---|---|---|
| 超链接 | ⚠️ 部分支持 | 只显示链接文字，无法点击跳转 |
| 书签 | ❌ | 不支持 |
| 目录 | ⚠️ 部分支持 | 只显示文字，无法点击导航 |
| 交叉引用 | ❌ | 不支持 |
| 域代码 | ❌ | 日期、页码等域代码不计算 |
| 宏/VBA | ❌ | 完全忽略 |
| 嵌入对象 | ❌ | Excel 表格、Visio 图等 |
📋 功能对比表
Monaco Editor vs Word 原生比较功能
| 对比维度 | Monaco Editor | Word 原生「比较」 | 备注 |
|---|---|---|---|
| 文本内容 | ✅ 完全支持 | ✅ 完全支持 | Monaco 可精准识别文字差异 |
| 字号大小 | ❌ 不支持 | ✅ 支持 | Word 可显示字号变化 |
| 字体/样式 | ❌ 不支持 | ✅ 支持 | Word 可显示加粗、斜体等 |
| 颜色 | ❌ 不支持 | ✅ 支持 | Word 可显示字体颜色变化 |
| 表格结构 | ❌ 不支持 | ✅ 支持 | Word 可对比表格单元格变化 |
| 图片 | ❌ 不支持 | ✅ 支持 | Word 可显示图片增删 |
| 页眉页脚 | ❌ 不支持 | ✅ 支持 | Word 可对比页眉页脚内容 |
| 批注/修订 | ❌ 不支持 | ✅ 支持 | Word 有完整的修订模式 |
| 并排对比 | ✅ 支持 | ✅ 支持 | 两者都支持左右对比 |
| 差异导航 | ✅ 支持 | ✅ 支持 | 两者都可跳转到差异位置 |
| 在线使用 | ✅ 支持 | ❌ 需要桌面应用 | Monaco 可在浏览器中运行 |
| 跨平台 | ✅ 支持 | ⚠️ 部分支持 | Monaco 支持所有平台，Word 需要安装 |
| 性能 | ✅ 轻量快速 | ⚠️ 依赖 Office | Monaco 加载快，Word 需要完整 Office |
💡 使用建议
✅ 适用场景
-
纯文本合同对比
- 只关心条款内容变化
- 不关心格式（字体、字号、颜色）
- 适合法律条款审核
-
代码文件对比
- JavaScript、Python、Java 等源代码
- JSON、YAML 配置文件
- Markdown 文档
-
法律文书文本对比
- 合同条款修改对比
- 法规文件版本对比
- 协议文本变更追踪
-
纯文本文档
- TXT 文件
- CSV 文件
- 日志文件
❌ 不适用场景
-
需要格式审查的文档
- 投标文件格式审查（需要检查字号、字体）
- 公文格式审核（需要检查页边距、行距）
- 排版质量检查
-
包含复杂元素的文档
- 技术文档（包含大量图表）
- 设计方案（包含截图和示意图）
- 财务报表（包含 Excel 表格）
-
需要保留完整格式的场景
- 档案归档（需要保留原始格式）
- 打印输出（需要格式一致）
- 格式敏感的文档
🔄 替代方案
如果您需要对比格式化文档，建议使用以下方案：
1. Word 原生功能
路径：审阅 → 比较 → 比较文档
优点：
- ✅ 完整支持所有 Word 格式
- ✅ 显示详细的修订标记
- ✅ 可选择对比粒度（字符/单词/段落）
缺点：
- ❌ 需要安装 Microsoft Word
- ❌ 无法在浏览器中使用
- ❌ 不支持批量对比
2. Collabora Online
说明：开源的在线 Office 套件，支持 Word 文档预览和编辑
优点：
- ✅ 在线使用，无需安装
- ✅ 保留文档格式
- ✅ 支持多人协作
缺点：
- ❌ 对比功能不如 Word 原生强大
- ❌ 需要部署 Collabora 服务器
项目集成参考：见 CLAUDE.md 中的 Collabora 集成文档
3. 专业文档对比工具
| 工具名称 | 类型 | 主要功能 |
|---|---|---|
| Beyond Compare | 桌面应用 | 专业的文件/文件夹对比工具 |
| WinMerge | 开源工具 | 免费的文本对比工具 |
| Araxis Merge | 商业软件 | 支持 Word/PDF/图片对比 |
| DiffChecker | 在线工具 | 简单的在线文本对比 |
📚 技术实现
项目中的实现方式
文件位置：app/routes/monaco-demo.tsx
关键步骤：
- 提取文本（使用 mammoth 库）
import mammoth from 'mammoth';
const response = await fetch(docUrl);
const arrayBuffer = await response.arrayBuffer();
const textResult = await mammoth.extractRawText({ arrayBuffer });
const plainText = textResult.value;
- 加载到 Monaco Editor
import { DiffEditor } from "@monaco-editor/react";
<DiffEditor
height="90vh"
language="plaintext"
original={originalText} // 原始文档文本
modified={modifiedText} // 修改后的文档文本
options={{
readOnly: true,
renderSideBySide: true, // 并排显示
ignoreTrimWhitespace: false,
fontSize: 14,
wordWrap: 'on',
minimap: { enabled: true },
}}
/>
- 差异导航
const handleEditorDidMount = (editor) => {
const lineChanges = editor.getLineChanges();
console.log(`发现 ${lineChanges.length} 处差异`);
};
const goToNextDiff = () => {
const modifiedEditor = diffEditorRef.current.getModifiedEditor();
modifiedEditor.revealLineInCenter(nextChange.modifiedStartLineNumber);
};
使用方法
URL 参数加载文档：
/monaco-demo?doc1=路径1&doc2=路径2
示例：
/monaco-demo?doc1=testWork/合同(1).docx&doc2=testWork/合同(2).docx
⚠️ 注意事项
1. 文本提取的限制
- 表格：表格结构会丢失，只保留单元格内的文字
- 图片：完全忽略，不提取
- 格式：所有格式化信息（字体、颜色、大小）全部丢失
2. 扫描版 PDF 的问题
- 扫描版 PDF（图片 PDF）几乎无法提取文字
- 需要 OCR（光学字符识别）才能提取文字
- 项目暂不支持 OCR
3. 性能考虑
- Monaco Editor 体积较大（约 5MB）
- 建议使用 CDN 加速
- 大文件（>10MB）建议分段加载
4. 中文编码问题
- 确保文件编码为 UTF-8
- 使用
file.text()自动识别编码 - 避免使用 GBK 等编码
📖 相关文档
🎯 结论
Monaco Editor 适合用于：
- ✅ 纯文本内容对比（合同条款、代码、配置文件）
- ✅ 在线文档对比（无需安装桌面软件）
- ✅ 开发者工具集成（代码审查、版本对比）
Monaco Editor 不适合用于：
- ❌ 格式敏感的文档对比（投标文件、公文）
- ❌ 包含图表的文档（技术文档、报告）
- ❌ 需要完整保留 Word 格式的场景
建议：
- 对于纯文本合同对比，Monaco Editor 是理想选择
- 对于格式敏感的文档，建议使用 Word 原生比较功能
- 对于在线协作场景，可考虑集成 Collabora Online
文档版本：v1.0 最后更新：2025-01-29 作者：中国烟草AI合同及卷宗审核系统开发团队