tiptap 将协作融入编辑器

引言

欢迎！本指南将指导您如何将简单的文本区域转化为功能完善的协作 Tiptap 编辑器实例。我们从基础的文本区域开始，逐步构建一个适用于便签应用等场景的实时协作编辑器。这是使用 Collaboration 实现项目中实时协作的起点，我们将一步步指导您无缝集成和自定义。

假设您有一些文本区域，根据您的框架（如 Vue、React 等），代码可能类似这样：

<tiptap-demo name="教程/1-1-textarea"></tiptap-demo>

为了提供更好的协作和格式选项，您需要在 Note 组件中修改代码，引入 Tiptap。

首先导入必要的 Tiptap 组件，并在 Note 组件内创建一个新的编辑器实例。

npm install @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit
# 对于 React：npm install @tiptap/react @tiptap/pm @tiptap/starter-kit

<tiptap-demo name="教程/1-2-tiptap"></tiptap-demo>

现在 Note 组件已经拥有一个完全可用的编辑器实例！用户现在可以格式化文本（有关如何添加菜单栏，请参考 https://tiptap.dev/guide/menus，例如，可以使用 cmd+b 来使文本加粗）。但关于协作呢？

为了实现协作，您需要在编辑器实例中添加 Collaboration 扩展。这个扩展允许多个用户同时编辑同一文档，实时同步更改。

要在编辑器实例中添加 Collaboration 扩展，首先安装 @tiptap/extension-collaboration 包：

npm install @tiptap/extension-collaboration yjs

然后，导入 Collaboration 扩展并将其添加到您的编辑器扩展中：

<tiptap-demo name="教程/1-3-yjs"></tiptap-demo>

好了，我们做了什么？

我们添加了协作扩展及其背后的 Yjs 技术。现在传递的是 Y.Doc，它负责合并更改。但目前还没有实现真正的协作...

要启用实时协作，我们需要将 Y.Doc 与 TiptapCollabProvider 连接起来。TiptapCollabProvider 是一个提供简单方法在不同客户端之间同步 Y.Doc 的包。

开始使用 TiptapCollabProvider，我们需要创建 TiptapCollabProvider 的新实例，并传入我们的 Y.Doc。还需要提供一个文档名称。

首先，注册一个 Tiptap Pro 账户，它会提供免费的 Tiptap Collab 许可：

注册后，请点击“加入 beta”。按照指示操作，几分钟内即可完成设置。

您的应用 ID 在云端管理界面显示：https://cloud.tiptap.dev/ - 只需复制并从设置区域获取 JWT（安全令牌）。它有效时间为两小时，对我们的快速测试绰绰有余。稍后我们会讲解如何使用您的密钥生成 JWT。

回到我们的应用程序：

npm install @hocuspocus/provider

现在，让我们创建 TiptapCollabProvider，开始同步：

<tiptap-demo name="教程/1-4-collab"></tiptap-demo>

就这样！通过这些更改，我们的 Tiptap 笔记应用现在已完全实现协作。笔记将在实时同步到其他用户。

这只是 Collaboration 和 Hocuspocus 功能的冰山一角。未来文章中，我们将深入探讨更复杂的情景，如权限管理、在线状态指示器等。不要错过！