基于 Vue3 和 Tiptap的在线多人协同编辑文本编辑器

为Umo Editor启用Tiptap协同编辑功能

前言

在寻找vue生态下的具有协同编辑功能的编辑器的时候，我发现了Umo Editor这个，基于tiptap的开源编辑器。 而且页面十分美观，功能也很完善。还是基于vue3,vite打造的完美符合我所需的技术栈。但是Umo Editor的文档好像并没有提到关于协同编辑的部分。于是我研究了一下写了个简易的node服务，实现Umo Editor的协同编辑功能。

协同编辑demo github.com/Skywang16/c...

Umo Editor与Tiptap

Umo EditorUmo Editor 是一个基于 Vue3 和 Tiptap 的适合于国人使用的本土化开源文档编辑器。Umo Editor 提供完善的文档编辑能力和 AI 创作能力，支持分页，支持 Markdown 语法，支持基础的富文本编辑功能，支持多种插入多种格式的节点类型、提供了多种类型的实用工具，并支持设置页面的样式，支持导出多种类型的格式，支持打印和打印预览，支持文档块编辑，支持添加自定义扩展，支持多语言设置，支持暗色主题。

启用协同编辑功能

启用协同编辑功能非常简单，主要分为以下几个步骤：

1. 安装必要依赖

npm install @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor

2. 创建WebSocket服务器

为了支持实时通信，我们需要一个简单的WebSocket服务器：

// collaboration-server/server.js
const WebSocket = require('ws');
const http = require('http');

const server = http.createServer();
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    // 广播消息给所有连接的客户端
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

server.listen(1234, () => {
  console.log('协同编辑服务器运行在端口 1234');
});

3. 配置编辑器

在Umo Editor中启用协同编辑扩展：

import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'

// 创建文档
const ydoc = new Y.Doc()

// 连接WebSocket服务器
const provider = new WebsocketProvider(
  'ws://localhost:1234',
  'umo-editor-document',
  ydoc
)

// 配置编辑器
const editor = new Editor({
  extensions: [
    StarterKit.configure({
      history: false, // 使用Y.js的历史记录
    }),
    Collaboration.configure({
      document: ydoc,
    }),
    CollaborationCursor.configure({
      provider,
    }),
  ],
})

使用方法

1. 启动WebSocket服务器：

cd collaboration-server
node server.js

2. 启动Umo Editor：

npm run dev

3. 在不同的浏览器窗口中打开编辑器，即可体验实时协同编辑功能。

总结

通过简单的配置，我们成功启用了Tiptap提供的协同编辑功能。

参考资源

• Tiptap 协同编辑文档
• Y.js 官方文档