基于 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. 安装必要依赖

bash 复制代码
npm install @tiptap/extension-collaboration @tiptap/extension-collaboration-cursor

2. 创建WebSocket服务器

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

javascript 复制代码
// 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中启用协同编辑扩展:

typescript 复制代码
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服务器:
bash 复制代码
cd collaboration-server
node server.js
  1. 启动Umo Editor:
bash 复制代码
npm run dev
  1. 在不同的浏览器窗口中打开编辑器,即可体验实时协同编辑功能。

总结

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

参考资源

相关推荐
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_3 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴8505 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
JSON_L9 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊9 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选9 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
Britney⁺♛&?ꪶꪫꪜꫀ13 小时前
Vue2上
vue.js·npm
江城开朗的豌豆13 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
海天胜景16 小时前
vue3 el-table 列数据合计
前端·javascript·vue.js