本文由曹里林同学原创。 ## 简介 TinyEditor 是一个框架无关的富文本编辑器，既可以在原生 JavaScript 项目中使用，也可以在 Vue、React 等前端框架中使用。本篇文章带来的是如何使用 TinyEditor 最新的协同编辑模块快速部署多人实时协作编辑。 ![1.JPG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/870dab7032d6448b850fc9fcc830f2e0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgT3BlblRpbnnnpL7ljLo=:q75.awebp?rk3s=f64ab15b&x-expires=1768279831&x-signature=1pUK%2FVZ5FgibnOt9NFCCrrPGnco%3D) ## 前端集成 ### 1、安装TinyEditor 首先需要安装 TinyEditor pnpm i @opentiny/fluent-editor 编写 Html 引入 TinyEditor 和对应的样式 ``` @import '@opentiny/fluent-editor/style.css'; ```

Hello TinyEditor!

import FluentEditor from '@opentiny/fluent-editor' const editor = new FluentEditor('#editor', { theme: 'snow', }) 至此已经引入了 TinyEditor 编辑器，接下来安装协同编辑模块。 ### 2、安装协同编辑模块安装额外依赖 pnpm i quill-cursors y-protocols y-quill yjs y-indexeddb y-websocket 引入协同编辑模块 ```js import FluentEditor, { CollaborationModule } from '@opentiny/fluent-editor' FluentEditor.register('modules/collaborative-editing', CollaborationModule, true) ``` 编辑器基础配置：通过配置 serverUrl 和 roomName, 双方进行协同编辑通信 ```js const editor = new FluentEditor('#editor', { theme: 'snow', modules: { 'collaborative-editing': { provider: { type: 'websocket', options: { serverUrl: 'wss://demos.yjs.dev/ws', // 正式环境更换成正式服务地址 roomName: 'Tiny-Editor-Demo-juejin', // 双方通信的房间名 }, }, }, }, }) ``` 现在协同编辑已经可用。 ![PixPin\_2025-10-20\_21-46-06.gif](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5f5877094758471cae8f5098e8a82052~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgT3BlblRpbnnnpL7ljLo=:q75.awebp?rk3s=f64ab15b&x-expires=1768279831&x-signature=M%2FCDabk1l9GvASMrFWqyFrSppqY%3D) ### 3、Provider配置 Provider 是协同编辑的核心，它负责管理客户端和服务器之间的数据同步。TinyEditor 支持多种 Provider 类型，最常见的是 WebSocket Provider 和 WebRTC Provider。 **WebSocket Provider** 这是最常用的连接方式，通过标准的 WebSocket 协议与后端服务器进行通信。 ![3.PNG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dca16188dd8a4aa495d79608b9b6d0e9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgT3BlblRpbnnnpL7ljLo=:q75.awebp?rk3s=f64ab15b&x-expires=1768279831&x-signature=SMva4%2F6CgAcQZqn98ngDq34duHk%3D) 示例配置： ```js const editor = new FluentEditor('#editor', { modules: { 'collaborative-editing': { provider: { type: 'websocket', options: { serverUrl: 'wss://demos.yjs.dev/ws', roomName: 'my-unique-document-id', }, }, }, }, }); ``` **WebRTC Provider** 注意: 需要额外安装 WebRTC 依赖 pnpm i y-webrtc。使用这种方式采用点对点连接，不需要中心化的 WebSocket 服务器，更适合低延迟和对网络拓扑有特殊要求的场景。 ![4.PNG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c44a4be1d8da49aeb745ea061687d2d9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgT3BlblRpbnnnpL7ljLo=:q75.awebp?rk3s=f64ab15b&x-expires=1768279831&x-signature=2aC2vNdtqmkdNVG%2FNjah5z87LGo%3D) 示例配置： ```js const editor = new FluentEditor('#editor', { modules: { 'collaborative-editing': { provider: { type: 'webrtc', options: { roomName: 'tiny-editor-webrtc-demo', signaling: ['wss://signaling.yjs.dev'], }, }, }, }, }); ``` ### 4、Awareness 配置 Awareness 模块负责同步用户的在线状态、光标位置和选区。通过配置，你可以自定义用户的显示信息。 Awareness 实现用户在线状态、光标位置等信息的实时同步。每个用户的在线状态、名称、颜色、光标位置等会自动广播给其他协作者，实现多人编辑时的身份和操作可视化。 ![5.PNG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fd1c173cb9d54543a9e7e319381e7a71~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgT3BlblRpbnnnpL7ljLo=:q75.awebp?rk3s=f64ab15b&x-expires=1768279831&x-signature=FvpNYNb6DUe1tAxAvPpVe%2F%2FcGy0%3D) **Awareness 结构** ![6.PNG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/67f66f6d769243f68376f1b906086324~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgT3BlblRpbnnnpL7ljLo=:q75.awebp?rk3s=f64ab15b&x-expires=1768279831&x-signature=Jf5jk2SJwy11uYKRioEJ%2BVxylMo%3D) 示例配置： awareness: { state: { name: `user${Math.random().toString(36).substring(2, 8)}`, color: `#${Math.floor(Math.random() * 16777215).toString(16)}` }, timeout: 30000, } ### 5、Cursor 配置 cursors 默认开启，并且支持以下配置（详细配置可见 quill-cursors）： ![7.PNG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/45ae32bdb0a24b7aa570cfd90e88bdf0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgT3BlblRpbnnnpL7ljLo=:q75.awebp?rk3s=f64ab15b&x-expires=1768279831&x-signature=y7zGu8ALjuwV8th%2BJ3ERJiONq9o%3D) > 注意光标模板内的类名不可变示例配置： ```js const CURSOR_CLASSES = { SELECTION_CLASS: 'ql-cursor-selections', CARET_CONTAINER_CLASS: 'ql-cursor-caret-container', CARET_CLASS: 'ql-cursor-caret', FLAG_CLASS: 'ql-cursor-flag', NAME_CLASS: 'ql-cursor-name', } cursors: { template: `

`, hideDelayMs: 300, hideSpeedMs: 300, transformOnTextChange: true, } ``` ### 6、事件回调 ![8.PNG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/368da71ee9a948f685a2203dc3ec93bf~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgT3BlblRpbnnnpL7ljLo=:q75.awebp?rk3s=f64ab15b&x-expires=1768279831&x-signature=TF6tK9sWAMURqe6W2DGbcFOT01c%3D) ## 后端部署 TinyEditor 的协同编辑后端服务已为你准备好 Docker 镜像，只需简单几步即可快速部署，无需复杂的本地环境配置。 ### 1、准备 Docker 环境确保你的机器上已安装 Docker 和 Docker Compose。 ### 2、拉取镜像并配置在您的项目根目录下创建 docker-compose.yml 文件。 docker-compose.yml 此文件定义了两个服务：mongodb（用于数据持久化）和 websocket-server（协同编辑后端服务）。 * 如果您没有可用的 MongoDB 服务： * 请使用完整的 docker-compose.yml 文件，它会自动启动一个名为 mongodb 的服务。 * 如果您已经有可用的 MongoDB 服务： * 您不需要启动 mongodb 服务（可以将其从 docker-compose.yml 文件中删除或注释掉）。 * 您只需修改 websocket-server 服务中的 MONGODB\_URL 环境变量，将其指向您现有的 MongoDB 实例地址。 ``` services: mongodb: image: mongo:latest container_name: yjs-mongodb restart: always ports: - "27017:27017" environment: MONGO_INITDB_ROOT_USERNAME: admin # 设置 MongoDB 初始用户名 MONGO_INITDB_ROOT_PASSWORD: admin!123 # 设置 MongoDB 初始密码 volumes: - mongodb_data:/data/db websocket-server: image: yinlin124/collaborative-editor-backend:latest container_name: yjs-websocket-server restart: always ports: - "${PORT:-1234}:${PORT:-1234}" environment: HOST: ${HOST:-0.0.0.0} # 设置后端监听的网络接口 PORT: ${PORT:-1234} # 默认 1234 端口，可以使用环境变量修改 MONGODB_URL: ${MONGODB_URL:-mongodb://admin:admin!123@mongodb:27017/?authSource=admin} # 如果你使用自己的 mongodb 服务需要修改此项 MONGODB_DB: ${MONGODB_DB:-tinyeditor} # 数据库名称 MONGODB_COLLECTION: ${MONGODB_COLLECTION:-documents} # 集合名称 depends_on: - mongodb volumes: mongodb_data: ``` 如果你需要更换映射端口等，可创建 .env 文件按照下面的参数值更改环境变量： ![9.PNG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/038881cec82d4e98b70fe5b4409ea496~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgT3BlblRpbnnnpL7ljLo=:q75.awebp?rk3s=f64ab15b&x-expires=1768279831&x-signature=ucsgOIq%2FbrESLW7%2FMEIi5PfSBCE%3D) ### 3、一键启动服务在项目根目录下运行 docker-compose 命令，Docker 会自动下载镜像、创建容器并启动服务。 docker compose up -d 后端启动后将前端编辑器配置中的 serverUrl 改成对应的服务器 IP:port。 ## 更多需求如果你有自定义持久化或者自定义 provider 等需求可查看文档： issue。 ## 关于OpenTiny 欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～\ 🌐 官网：\ 📦 GitHub：（欢迎star） OpenTiny NEXT 正式发布，官网、文档、示例、Demo 一站配齐。未来已来，欢迎上车！同时欢迎大家进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor\~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献\~