基于 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 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)42 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi2 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X2 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come112343 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
海天胜景5 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼5 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再5 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5555 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架