html不支持实时协同编辑，需javascript+后端服务实现；contenteditable仅提供编辑入口，不可直接用于协同；必须用操作日志（oplog）和crdt等机制保障一致性。
HTML 本身不支持实时协同编辑
纯 HTML 是静态标记语言，没有内置的协同逻辑、状态同步或网络通信能力。所谓“HTML 创建协作区”，实际是用 HTML 搭界面壳子，背后必须依赖 JavaScript + 后端服务（如 WebSocket、CRDT 库、或第三方 SDK）来实现光标同步、操作合并、冲突解决等。
常见错误现象：document.getElementById("editor").contentEditable = true 后多人同时改——结果互相覆盖、光标乱跳、内容丢失。这不是 HTML 的错，是误把“可编辑”当“可协同”。
使用场景中真正需要的不是 HTML 标签，而是：一个 contenteditable 或 textarea 容器 + 一套变更捕获机制 + 服务端广播通道 + 客户端操作转换逻辑。
用 contenteditable 做协作入口，但别信它的原生行为
contenteditable 是唯一能在 HTML 中快速获得富文本编辑能力的属性，但它天生不适合协同：剪贴板操作、撤销栈、DOM 变更粒度都不可控，不同浏览器解析差异大。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 始终用
spellcheck="false"关闭拼写检查，避免光标意外跳转 - 禁用默认右键菜单：
oncontextmenu="return false"，否则用户粘贴时可能触发非预期 DOM 插入 - 不要监听
input事件做同步——它不捕获格式操作（比如加粗、缩进），应改用beforeinput+selectionchange组合 - 对
contenteditable元素设tabindex="0"，否则键盘焦点管理会出问题
协同必须走外部状态管理，不能靠 DOM 快照
有人尝试定时 innerHTML 全量比对并广播差异，这在小文档里看似可行，但实际会迅速卡死：DOM 解析慢、diff 算法不准、无法处理并发插入同一位置的问题。
正确路径是把编辑动作抽象成可序列化的操作（operation），例如：
{
"type": "insert",
"pos": 12,
"text": "hello",
"clientId": "user-a-7f3"
}
关键点：
- 所有编辑操作必须带客户端 ID 和时间戳（或逻辑时钟），用于排序和去重
- 服务端不做“存 HTML”，而是存操作日志（oplog），客户端按顺序重放生成最终视图
- 优先用成熟库如
yjs或automerge，它们已处理了 CRDT 冲突合并，比手写强得多 - 如果硬要自研，务必测试“两人同时在段首插入字符”的 case，这是最常崩的点
部署时最容易忽略的 CORS 和连接保活
本地开发时 localhost:3000 直连 localhost:8080 看似正常，一上生产就断连——因为没配好跨域头或反向代理的 WebSocket 升级头。
典型错误信息：WebSocket connection to 'wss://example.com/ws' failed: Error during WebSocket handshake
实操检查项：
- Nginx 配置里必须有
proxy_http_version 1.1和proxy_set_header Upgrade $http_upgrade - 后端响应需包含
Access-Control-Allow-Origin，且不能是通配符*（若带凭证） - 前端建立连接后，每 30 秒发一次
ping心跳，服务端超时 60 秒未收心跳就关连接 - 移动端 Safari 对 WebSocket 连接数有限制（通常 6 个），别让协作页悄悄开多个连接
协同的复杂性不在 HTML 怎么写，而在于你怎么让两个互不信任的浏览器，在无共享内存、无全局时钟的前提下，对同一份数据达成一致。这个“一致”不是靠刷新页面实现的。
