嘿，各位观众老爷，今天咱来聊聊如何在 Vue 应用里整一个实时协作编辑器，就像 Google Docs 那种，大家一起写东西，你一句我一句，热闹得很。这玩意儿听起来玄乎，其实也没那么可怕，咱一步一步来，保证你能听明白。
一、选兵点将：编辑器框架的选择
首先，咱们得选个趁手的兵器。市面上编辑器框架不少，ProseMirror 和 Quill 是比较流行的俩选择。
-
ProseMirror: 就像个乐高积木，高度可定制，但上手难度稍微高一点。适合需要精细控制的场景。
-
Quill: 更像个瑞士军刀，功能丰富，API 友好，上手容易。适合快速搭建和通用场景。
今天咱选 Quill，因为它比较容易上手，适合咱们今天的目标：快速搭建一个能跑起来的 demo。
| 特性 | ProseMirror | Quill |
|---|---|---|
| 定制性 | 高，模块化，可定制性强 | 中等，主题和模块可定制 |
| 学习曲线 | 陡峭，需要理解其文档模型 | 较平缓，API 简洁易懂 |
| 适用场景 | 需要高度定制，复杂文档结构的场景 | 通用场景，快速搭建，易于上手 |
| 插件生态 | 活跃，但相对 Quill 较小 | 庞大，社区活跃 |
| 文档模型 | 基于内容块的结构化文档模型 | 基于 Delta 的操作序列 |
二、搭建 Vue + Quill 基础框架
-
安装依赖:
先建个 Vue 项目，然后安装 Quill 和 vue-quill-editor：
npm install vue-quill-editor quill --save # 或者 yarn add vue-quill-editor quill -
创建 Quill 编辑器组件:
在
components目录下新建一个QuillEditor.vue文件：<template> <div class="quill-editor"> <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorChange($event)" /> </div> </template> <script> import { quillEditor } from 'vue-quill-editor'; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; //import 'quill/dist/quill.bubble.css'; //根据需要引入 export default { components: { quillEditor, }, props: { initialContent: { type: String, default: '' } }, data() { return { content: this.initialContent || '', editorOption: { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], // toggled buttons ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], // custom button values [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript [{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent [{ 'direction': 'rtl' }], // text direction [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], // dropdown with defaults and custom values [{ 'font': [] }], [{ 'align': [] }], ['clean'], // remove formatting button ['link', 'image', 'video'] // link and image, video ] }, theme: 'snow' } } }, watch: { initialContent(newVal) { if (newVal !== this.content) { this.content = newVal; } } }, methods: { onEditorBlur(editor) { //console.log('editor blur!', editor) }, onEditorFocus(editor) { //console.log('editor focus!', editor) }, onEditorReady(editor) { //console.log('editor ready!', editor) }, onEditorChange({ editor, text, html }) { //console.log('editor change!', editor, text, html) this.$emit('content-change', html); } } } </script> <style scoped> .quill-editor { width: 80%; margin: 0 auto; } </style> -
在父组件中使用:
在
App.vue或者其他你想用的地方引入并使用QuillEditor组件：<template> <div id="app"> <h1>实时协作编辑器 Demo</h1> <QuillEditor :initialContent="editorContent" @content-change="updateContent" /> <p>当前内容：</p> <div v-html="editorContent"></div> </div> </template> <script> import QuillEditor from './components/QuillEditor.vue'; export default { components: { QuillEditor }, data() { return { editorContent: '' } }, methods: { updateContent(newContent) { this.editorContent = newContent; } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>现在，你运行项目，就能看到一个基本的 Quill 编辑器了。你可以输入文字，进行格式化，但这还是个单机版，离实时协作还远着呢。
三、数据同步的核心：WebSocket + Delta
要实现实时协作，核心在于数据同步。我们需要一个服务器来协调各个客户端之间的修改。这里我们用 WebSocket 作为通信协议，因为它能建立持久连接，方便服务器向客户端推送数据。同时我们需要使用 Quill 提供的 Delta 格式来传输编辑操作。
-
什么是 Delta?
Delta 是 Quill 用来描述文档变化的格式。它是一个 JSON 对象，包含一系列操作（
insert,delete,retain），每个操作都描述了对文档的一次修改。例如，插入 "hello" 这五个字母，Delta 可能是这样的：
{ "ops": [ { "insert": "hello" } ] }删除 5 个字符，Delta 可能是这样的：
{ "ops": [ { "delete": 5 } ] }保留 5 个字符，然后应用一个加粗的格式，Delta 可能是这样的：
{ "ops": [ { "retain": 5, "attributes": { "bold": true } } ] }Delta 的好处在于它描述的是操作，而不是整个文档的内容。这样可以减少传输的数据量，提高效率。
-
服务器端 (Node.js + WebSocket)
咱们用 Node.js 和
ws模块来搭建一个简单的 WebSocket 服务器。npm install ws --save创建一个
server.js文件：const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); let documentContent = { ops: [] }; // 初始化文档内容 wss.on('connection', ws => { console.log('Client connected'); // 发送当前文档内容给新连接的客户端 ws.send(JSON.stringify({ type: 'doc', content: documentContent })); ws.on('message', message => { try { const data = JSON.parse(message); if (data.type === 'delta') { const delta = data.delta; // 将新的 Delta 应用到文档内容 documentContent = applyDelta(documentContent, delta); // 广播 Delta 给所有其他客户端 wss.clients.forEach(client => { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(JSON.stringify({ type: 'delta', delta: delta })); } }); } } catch (error) { console.error('Error processing message:', error); } }); ws.on('close', () => { console.log('Client disconnected'); }); }); console.log('WebSocket server started on port 8080'); // 应用 Delta 的函数 (简化版) function applyDelta(doc, delta) { let newDoc = JSON.parse(JSON.stringify(doc)); // 深拷贝，避免直接修改原对象 delta.ops.forEach(op => { if (op.insert) { // 简单的插入操作：将文本插入到文档开头 newDoc.ops.unshift({ insert: op.insert }); } else if (op.delete) { // 简单的删除操作：忽略，因为我们简化了逻辑 // 在真实的实现中，需要维护光标位置和删除范围 } else if (op.retain) { // 简单的保留操作：忽略，因为我们简化了逻辑 // 在真实的实现中，retain 通常用于应用格式 } }); return newDoc; }这个服务器做了这些事情：
- 监听 8080 端口的 WebSocket 连接。
- 当有客户端连接时，发送当前的文档内容给它。
- 当收到客户端发来的 Delta 时，将 Delta 应用到本地的文档内容，并广播给所有其他客户端。
applyDelta函数用于将 Delta 应用到当前的文档内容。 注意：这个applyDelta函数只是一个非常简化的版本，实际应用中需要更复杂的逻辑来处理光标位置、删除操作、格式化等等。
运行服务器：
node server.js -
客户端 (Vue + Quill) 修改:
修改
QuillEditor.vue组件，连接 WebSocket 服务器，并发送和接收 Delta。<template> <div class="quill-editor"> <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorChange($event)" /> </div> </template> <script> import { quillEditor } from 'vue-quill-editor'; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css'; export default { components: { quillEditor, }, props: { initialContent: { type: String, default: '' } }, data() { return { content: this.initialContent || '', editorOption: { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'header': 1 }, { 'header': 2 }], [{ 'list': 'ordered'}, { 'list': 'bullet' }], [{ 'script': 'sub'}, { 'script': 'super' }], [{ 'indent': '-1'}, { 'indent': '+1' }], [{ 'direction': 'rtl' }], [{ 'size': ['small', false, 'large', 'huge'] }], [{ 'header': [1, 2, 3, 4, 5, 6, false] }], [{ 'color': [] }, { 'background': [] }], [{ 'font': [] }], [{ 'align': [] }], ['clean'], ['link', 'image', 'video'] ] }, theme: 'snow' }, socket: null, quill: null, // Quill 实例 } }, watch: { initialContent(newVal) { if (newVal !== this.content) { this.content = newVal; } } }, mounted() { this.connectWebSocket(); }, beforeDestroy() { this.disconnectWebSocket(); }, methods: { connectWebSocket() { this.socket = new WebSocket('ws://localhost:8080'); this.socket.onopen = () => { console.log('WebSocket connected'); }; this.socket.onmessage = event => { const data = JSON.parse(event.data); if (data.type === 'doc') { // 初始化编辑器内容 this.content = this.opsToHtml(data.content.ops); // 将 ops 转换为 HTML if (this.quill) { this.quill.setContents(data.content); } } else if (data.type === 'delta') { // 应用 Delta if (this.quill) { this.quill.updateContents(data.delta); } } }; this.socket.onclose = () => { console.log('WebSocket disconnected'); }; this.socket.onerror = error => { console.error('WebSocket error:', error); }; }, disconnectWebSocket() { if (this.socket) { this.socket.close(); } }, onEditorBlur(editor) { //console.log('editor blur!', editor) }, onEditorFocus(editor) { //console.log('editor focus!', editor) }, onEditorReady(editor) { //console.log('editor ready!', editor) this.quill = editor; // 保存 Quill 实例 }, onEditorChange({ editor, text, html, delta, oldDelta, source }) { //console.log('editor change!', editor, text, html, delta, oldDelta, source) //this.$emit('content-change', html); if (source === 'user' && this.socket && this.socket.readyState === WebSocket.OPEN) { this.socket.send(JSON.stringify({ type: 'delta', delta: delta })); } }, opsToHtml(ops) { // 一个简单的将 ops 转换为 HTML 的函数 let html = ''; ops.forEach(op => { if (op.insert) { html += op.insert; } }); return html; } } } </script> <style scoped> .quill-editor { width: 80%; margin: 0 auto; } </style>在这个修改后的组件中：
connectWebSocket方法用于连接 WebSocket 服务器，并处理接收到的消息。onEditorReady事件中保存了 Quill 实例，方便后续操作。onEditorChange事件中，当用户修改了内容时，将 Delta 发送到服务器。opsToHtml是一个非常简单的函数，用于将 Delta 的ops转换为 HTML。注意：这是一个非常简化的版本，实际应用中需要更复杂的逻辑来处理各种类型的操作和属性。
四、运行和测试
- 先启动服务器：
node server.js - 然后运行 Vue 项目：
npm run serve
现在，你可以打开多个浏览器窗口，访问你的 Vue 应用。在其中一个窗口中修改内容，你会发现其他窗口也会同步更新。恭喜你，你已经实现了一个简单的实时协作编辑器！
五、进阶之路：处理并发编辑和数据冲突
虽然咱们的 demo 跑起来了，但它还很简陋。在真实的协作场景中，会遇到各种各样的问题，比如：
- 并发编辑： 多个用户同时修改同一段文字，服务器如何处理这些冲突？
- 网络延迟： 网络不稳定，客户端接收到的 Delta 可能会乱序，导致文档内容不一致。
- 数据一致性： 如何保证所有客户端最终看到的是相同的内容？
要解决这些问题，需要更复杂的算法和数据结构。这里简单介绍几种常见的策略：
-
Operational Transformation (OT)
OT 是一种经典的并发控制算法，它通过转换操作来解决并发编辑冲突。每个客户端在发送操作之前，都会先将操作转换为适应当前文档状态的形式。这样可以保证操作的顺序和最终结果的正确性。ProseMirror 默认使用 OT 算法。
OT 的原理比较复杂，实现起来也比较困难。但它是目前最成熟的并发控制算法之一。
-
Conflict-free Replicated Data Type (CRDT)
CRDT 是一种特殊的数据类型，它可以保证在任何顺序下合并多个副本，最终得到相同的结果。CRDT 可以避免并发冲突，简化开发难度。
CRDT 的种类有很多，例如：
- Grow-Only Counter (G-Counter): 只能增加的计数器。
- Last Write Wins Register (LWW-Register): 总是选择最近写入的值。
- Observed-Remove Set (OR-Set): 允许添加和删除元素，但删除操作会保留历史记录，避免误删。
CRDT 的优点是简单易用，但缺点是可能会引入额外的存储开销。
-
Centralized Locking
最简单的策略是使用中心化的锁。当用户要修改文档时，先向服务器申请锁，拿到锁之后才能进行修改。修改完成后，释放锁。
这种方法的优点是简单粗暴，但缺点是性能较差，容易出现单点故障。
六、总结与展望
今天咱们一起搭建了一个简单的 Vue + Quill 实时协作编辑器，并了解了数据同步的核心原理。虽然这个 demo 还很简陋，但它已经具备了实时协作的基本功能。
要实现一个真正稳定可靠的实时协作编辑器，还需要做很多工作，比如：
- 完善并发控制算法： 选择合适的 OT 或 CRDT 算法，并进行优化。
- 处理网络延迟： 实现断线重连、消息重传等机制，保证数据一致性。
- 优化性能： 减少数据传输量，提高服务器处理能力。
- 增加更多功能： 支持更多格式、多人光标、评论等等。
实时协作编辑器是一个复杂的项目，但它也是一个非常有价值的项目。希望今天的讲座能给你带来一些启发，让你在未来的开发中更加得心应手。
好了，今天的讲座就到这里，感谢大家的收看！下次再见！