快速上手 Yjs：实时协作编辑的安装与配置指南
【免费下载链接】yjsShared data types for building collaborative software项目地址: https://gitcode.com/GitHub_Trending/yj/yjs
Yjs 是一个基于 CRDT 的实时协作编辑库：多人同时编辑同一份文档时，改动会自动分发到各个客户端并合并，不需要你手写冲突解决逻辑。搭配 ProseMirror、CodeMirror 等编辑器，它能把普通编辑器升级成共享文本协作场景，还支持离线编辑后的自动合并。
适合谁，解决什么问题
当你需要多人同时编辑一份文档，必须处理三件事：光标同步、两人改同一位置时的冲突合并、离线改动上线后如何并入。这些逻辑自己实现很难写对，而 Yjs 把它们做成了内置能力，你只需关注"编辑器如何渲染这份共享数据"。
能力速览 🧩
- 共享类型：Y.Text、Y.Array、Y.Map 等。它们像普通数据类型，但改动会自动传播到其他节点并无冲突合并。
- 网络无关：Yjs 本身不绑定网络方案。可以用 y-websocket 走中心服务器，用 y-webrtc 走 P2P，也可以自己接传输通道。
- 编辑器绑定：ProseMirror、CodeMirror、Quill、Monaco 都有现成绑定，带共享光标。
- 离线优先：配合 y-indexeddb 等本地持久化，文档秒开，离线期间写入的改动在重连后自动同步；撤销/重做由 Y.UndoManager 直接提供。
Yjs 快速安装
准备 Node.js 22+、npm（或 pnpm）和一个现代浏览器即可，不需要其他依赖：
git clone https://gitcode.com/GitHub_Trending/yj/yjs cd yjs npm install最小可运行示例 🚀
不建议一上来就搭完整协作应用，先跑仓库自带的测试套件验证核心逻辑：
npm test看到 Y.Text、Y.Array、快照（snapshot）、undo-redo 等测试模块依次通过，说明 CRDT 合并、文档更新编解码都已正常工作。想直观感受"实时协作编辑器"效果，建议再跑 y-prosemirror 绑定的示例：两个浏览器窗口打开同一文档，两边输入会实时出现在对方窗口里，光标也会同步移动。
常见配置方向
| 场景 | 常见做法 |
|---|---|
| 富文本编辑（ProseMirror / Tiptap） | 用 y-prosemirror 绑定接入 Y.Text |
| 代码协作（CodeMirror） | 用 y-codemirror 绑定，同步代码与光标 |
| 轻量编辑器（Quill） | 用 y-quill 接入 |
| 实时同步 | 起一个 y-websocket 中继服务器，或改用 y-webrtc 做 P2P |
| 离线与持久化 | 浏览器侧加 y-indexeddb，只同步差量 |
配置的核心就三步：创建Y.Doc，用doc.getText('content')取出共享类型，把编辑器绑定上去；再挂一个 provider 负责同步与持久化。整个过程不碰 CRDT 内部。
新手避坑
- 版本不一致是最常见的坑：同步双方应保持相同版本的 Yjs，二进制更新协议不匹配会导致同步行为异常且难以排查。
- 装完包不等于能同步：Yjs 只管数据合并，不含网络层。不接 provider（如 y-websocket），编辑永远不会到达其他客户端。
- 包名容易看混：仓库源码包名是
@y/y，发布到 npm 时是yjs，在 package.json 里检索时以 npm 名为准。
延伸阅读
- README.md：编辑器绑定与 provider 的完整清单，以及 API 示例
- src/：核心源码，Y.Doc 与事务（Transaction）实现在 src/utils/
- tests/：各类型的行为测试，想验证合并规则时照着写即可
- INTernals.md：CRDT 算法与状态向量的原理说明
【免费下载链接】yjsShared data types for building collaborative software项目地址: https://gitcode.com/GitHub_Trending/yj/yjs
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
