tiptap 中文文档

tiptap collaborative 实时协作

tiptap 支持实时协作、让不同设备之间的同步和离线工作。通过与 Y.js 配合使用无需多少代码即可实现多人在线实时协作,不过在大部分的实践工作中,实时协作并不是一个强需求。

网络实时通信

WebRTC仅使用服务器让各个客户端(浏览器)击行相互通讯。服务器并不参与数据的传输。
安装依赖项:

npm install @tiptap/extension-collaboration yjs y-webrtc y-prosemirror

然后创建一个 Y 文档,并注册到 Tiptap:

import { WebrtcProvider } from 'y-webrtc'

// A new Y document
const ydoc = new Y.Doc()
// Registered with a WebRTC provider
const provider = new WebrtcProvider('example-document', ydoc)

const editor = new Editor({
  extensions: [
    StarterKit.configure({
      // The Collaboration extension comes with its own history handling
      history: false,
    }),
    // Register the document with Tiptap
    Collaboration.configure({
      document: ydoc,
    }),
  ],
})

到此为止你就可以让不同的用户进行实时协作了,它是如何运行的呢?WebRTC程序通过公共服务器将客户端连接在一起,服务器并不同步实际的更改,然而这个也有两个缺点。
1,浏览器拒绝连接太多客户端,对于同一文档中超过 100+ 个并发客户端,它不能很好的支持。
2,服务器没有参与文档记录的更改,因为WebRTC信令服务器不会收到更改,因此不知道文档中的内容。
如果你想更深入地研究,请前往GitHub上的Y WebRTC存储库

WebSocket 推荐

对于大多数情况,tiptap建议使用 WebSocket ,因为它更灵活,也可以很好地扩展。为了更容易使用,tiptap发布了Hocuspocus作为Tiptap的官方后端程序。

对于客户端示例几乎相同,只不过驱动程序不同。首先,让我们安装依赖项:

npm install @tiptap/extension-collaboration @hocuspocus/provider y-prosemirror

然后向 Tiptap 注册 WebSocket 供应程序:

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import Collaboration from '@tiptap/extension-collaboration'
import { HocuspocusProvider } from '@hocuspocus/provider'

// Set up the Hocuspocus WebSocket provider
const provider = new HocuspocusProvider({
  url: 'ws://127.0.0.1:1234',
  name: 'example-document',
})

const editor = new Editor({
  extensions: [
    StarterKit.configure({
      // The Collaboration extension comes with its own history handling
      history: false,
    }),
    // Register the document with Tiptap
    Collaboration.configure({
      document: provider.document,
    }),
  ],
})

如你所见此示例不是开箱即用的。它需要配置为与WebSocket服务器通信,因此需要安装WebSocket 后端程序Hocuspocus

WebSocket 后端

为了使服务器部分尽可能简单,tiptap提供了一个node.js的服务器包 Hocuspocus。它是一个灵活的 Node.js 包,可用于构建后端。
下面的命令用来启动这个服务:

npx @hocuspocus/cli --port 1234 --sqlite

运行 Hocuspocus 命令行,启动侦听1234端口并将更改存储在内存中(一旦停止命令,它就会消失),输出如下所示:

Hocuspocus v1.0.0 running at:

> HTTP: http://127.0.0.1:1234
> WebSocket: ws://127.0.0.1:1234

Ready.

尝试在浏览器中打开 http://127.0.0.1:1234 网址,如果一切运行正常,你应该会看到一个纯文本。
然后返回 Tiptap 编辑器并F5刷新网页,它将连接到 Hocuspocus WebSocket 服务器,这时就可以与其他用户进行实时协作了。

多个服务器

你可以注册多个服务器保证服务的稳定,当一个服务器宕机客户端将连接另外一个服务器

new WebrtcProvider('example-document', ydoc)
new HocuspocusProvider({
  url: 'ws://127.0.0.1:1234',
  name: 'example-document',
  document: ydoc,
})

显示光标

当多个人进行在线编辑,你可以设置每个人的昵称显示在编辑器光标位置

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import { HocuspocusProvider } from '@hocuspocus/provider'

// Set up the Hocuspocus WebSocket provider
const provider = new HocuspocusProvider({
  url: 'ws://127.0.0.1:1234',
  name: 'example-document',
})

const editor = new Editor({
  extensions: [
    StarterKit.configure({
      // The Collaboration extension comes with its own history handling
      history: false,
    }),
    Collaboration.configure({
      document: provider.document,
    }),
    // Register the collaboration cursor extension
    CollaborationCursor.configure({
      provider: provider,
      user: {
        name: 'Cyndi Lauper',
        color: '#f783ac',
      },
    }),
  ],
})

离线支持

基于Y IndexedDB 你可以实现关闭浏览器后所有更改都将存储在浏览器中,下次联机时,WebSocket 提供程序将尝试查找连接并最终同步更改。

其他设置

文档名称、身份验证授权、在线演示请访问官方文档
协作编辑 – 提示编辑器 (tiptap.dev)

Catalog
快速入门 Guide 向导 configuration 配置 prosemirror api menus 菜单 styling 样式 output 输出格式 collaborative 实时协作 extensions 自定义扩展 API 列表