当前位置：首页 > news >正文

如何使用 TinyEditor 快速部署一个协同编辑器

news 2025/10/29 6:59:32

本文由曹里林同学原创。

简介

TinyEditor 是一个框架无关的富文本编辑器，既可以在原生 JavaScript 项目中使用，也可以在 Vue、React 等前端框架中使用。

本篇文章带来的是如何使用 TinyEditor 最新的协同编辑模块快速部署多人实时协作编辑。

请添加图片描述

前端集成

1、安装TinyEditor

首先需要安装 TinyEditor

pnpm i @opentiny/fluent-editor

编写 Html 引入 TinyEditor 和对应的样式


@import '@opentiny/fluent-editor/style.css';

<div id="editor"><p>Hello TinyEditor!</p>
</div>

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

引入协同编辑模块

import FluentEditor, { CollaborationModule } from '@opentiny/fluent-editor'
FluentEditor.register('modules/collaborative-editing', CollaborationModule, true)

编辑器基础配置：通过配置 serverUrl 和 roomName, 双方进行协同编辑通信

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',  // 双方通信的房间名},},},},
})

现在协同编辑已经可用。

请添加图片描述

3、Provider配置

Provider 是协同编辑的核心，它负责管理客户端和服务器之间的数据同步。TinyEditor 支持多种 Provider 类型，最常见的是 WebSocket Provider 和 WebRTC Provider。

WebSocket Provider

这是最常用的连接方式，通过标准的 WebSocket 协议与后端服务器进行通信。

请添加图片描述

示例配置：

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 服务器，更适合低延迟和对网络拓扑有特殊要求的场景。

请添加图片描述

示例配置：

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 实现用户在线状态、光标位置等信息的实时同步。每个用户的在线状态、名称、颜色、光标位置等会自动广播给其他协作者，实现多人编辑时的身份和操作可视化。

请添加图片描述

Awareness 结构

请添加图片描述

示例配置：

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）：

请添加图片描述

注意光标模板内的类名不可变

示例配置：

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: `<span class="${CURSOR_CLASSES.SELECTION_CLASS}"></span><span class="${CURSOR_CLASSES.CARET_CONTAINER_CLASS}"><span class="${CURSOR_CLASSES.CARET_CLASS}"></span></span><div class="${CURSOR_CLASSES.FLAG_CLASS}"><small class="${CURSOR_CLASSES.NAME_CLASS}"></small></div>`,hideDelayMs: 300,hideSpeedMs: 300,transformOnTextChange: true,
}

6、事件回调

请添加图片描述

后端部署

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: alwaysports:- "27017:27017" environment:MONGO_INITDB_ROOT_USERNAME: admin # 设置 MongoDB 初始用户名MONGO_INITDB_ROOT_PASSWORD: admin!123 # 设置 MongoDB 初始密码volumes:- mongodb_data:/data/dbwebsocket-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 文件按照下面的参数值更改环境变量：

请添加图片描述