🚀 BlockNote AI is here! Access the early preview.
BlockNote Docs/Features/实时协作

实时协作(多人文本编辑器)

让我们看看如何为你的 BlockNote 配置添加多人协作功能,实现用户之间的实时协作(类似于 Google Docs):

文本编辑协作

首页试用实时演示

BlockNote 使用了 Yjs 来实现该功能,你可以通过 collaboration 选项进行设置:

import * as Y from "yjs";
import { WebrtcProvider } from "y-webrtc";
// ...

const doc = new Y.Doc();

const provider = new WebrtcProvider("my-document-id", doc); // 设置 Yjs 提供者(如下所述)
const editor = useCreateBlockNote({
  // ...
  collaboration: {
    // 负责传输更新的 Yjs 提供者:
    provider,
    // 在 Y.Doc 中存储 BlockNote 数据的位置:
    fragment: doc.getXmlFragment("document-store"),
    // 此用户的信息(姓名和颜色):
    user: {
      name: "My Username",
      color: "#ff0000",
    },
    // 何时显示协作光标上的用户标签,默认是
    // "activity"(光标移动时显示),也可以设置为 "always"。
    showCursorLabels: "activity",
  },
  // ...
});

Yjs 提供者

当用户编辑文档时,增量变化(或称“更新”)会被捕获并可在你的应用用户之间共享。你可以通过设置 Yjs 提供者 来共享这些更新。在上面的示例中,我们使用了 y-webrtc 来通过 WebRTC(以及 BroadcastChannel)传输更新,但你可能会对其他更适合生产环境的提供者感兴趣。

  • Liveblocks —— 为 Yjs 文档提供完全托管的 WebSocket 基础设施和持久化数据存储。包含 webhook、REST API 和浏览器开发工具,适用于 Yjs
  • PartyKit —— 运行在 Cloudflare 上的无服务器提供者
  • Y-Sweet —— 开源提供者,完全托管于 Jamsocket,也可自托管
  • Hocuspocus —— 开源且可扩展的 Node.js 服务器,支持插件式存储(可扩展至 Redis)
  • y-websocket —— 可连接至你自有 websocket 服务器的提供者
  • y-indexeddb —— 离线存储支持
  • y-webrtc —— 通过 WebRTC 传输更新
  • Matrix-CRDT —— 通过 Matrix 同步更新(实验性)
  • Nostr-CRDT —— 通过 Nostr 同步更新(实验性)

Liveblocks

Liveblocks 提供了 Yjs 的托管后端。你可以通过下面的命令创建一个使用 Liveblocks 和 BlockNote 的全功能示例项目(你需要一个 Liveblocks 账户):

npx create-liveblocks-app@latest --example nextjs-blocknote --api-key

你也可以在 在线演示 中体验相同的示例。

对于更简单的演示,请查看这个示例,它遵循了他们的入门指南

如果你想了解更多 Liveblocks 集成信息,请查看他们针对 BlockNote 的现成功能API 参考

Partykit

在开发时,你可以使用我们的 Partykit 服务器来测试协作功能。在下面的示例中用 YPartyKitProvider 替换 WebrtcProvider

// npm install y-partykit
import YPartyKitProvider from "y-partykit/provider";

const provider = new YPartyKitProvider(
  "blocknote-dev.yousefed.partykit.dev",
  // 给你的应用使用的房间名称,需唯一:
  "your-project-name",
  doc,
);

想了解如何搭建自己的开发或生产服务器,请查看 PartyKit 文档BlockNote + Partykit 示例