从“截图大法”到真实交互：B 站专栏视频卡的技术革命

📌 一句话摘要

本文详细介绍了 B 站专栏编辑器从 Quill 的 Canvas 截图方案迁移至 ProseMirror 真实交互组件的技术实践，解决了复杂卡片的交互、性能与数据同步难题。

📝 详细摘要

文章回顾了 B 站富文本编辑器的演进历程，重点分析了在 Quill 时代因 Delta 模型扁平化限制，被迫采用 html2canvas 截图展示视频卡的弊端。为实现真实交互，团队转向 ProseMirror 生态，利用其树状文档模型和 NodeView 机制，实现了编辑器与 UI 组件的深度解耦。文章深入探讨了 Schema 定义、原子化节点处理、播放器实例池管理、批量解析缓存以及基于 Opus 协议的历史数据兼容策略，最终将文档从静态载体进化为动态应用容器。

💡 主要观点

- Quill 的线性 Delta 模型限制了复杂嵌套块级节点的实现。 由于 Delta 模型本质是扁平的操作记录，难以描述复杂的 UI 盒子，导致早期只能通过 Canvas 截图的“障眼法”来模拟视频卡片，丧失了交互性。

ProseMirror 的树状文档模型为复杂卡片提供了结构化支持。 相比扁平模型，ProseMirror 的 Document Tree 类似乐高积木，允许定义独立的块级节点并嵌套属性，天然适合承载具有复杂交互的视频组件。

通过 NodeView 机制实现编辑器数据与 UI 组件的真实桥接。 NodeView 充当了数据层与渲染层的中介，将 Vue/React 组件挂载到编辑器节点中，使编辑器内的卡片具备完整的生命周期和状态管理。

引入 CardPlayer 实例池与三级缓存策略解决运行时性能瓶颈。 为防止多播放器驻留导致内存崩溃，设计了实例互斥与 LRU 回收机制；同时通过防抖批量请求和全局缓存优化了链接解析的响应速度。

基于 Opus 协议和 H5 动态解析实现海量历史数据的平滑迁移。 通过统一发布协议 Opus 确保数据无损还原，并对无法迁移的旧标签采用 H5 柔性兜底解析，确保了新旧编辑器在内容生产端的兼容性。

💬 文章金句

- Delta 天生就是扁平的，它很难描述复杂的嵌套结构。我们被迫使用的‘截图大法’，其实就是在小票上画了个电视机的图案，而不是真的放了个电视机。

• 文档不再只是静态内容的载体，而是动态应用的容器。
• atom: true 是这里的神来之笔。它告诉 ProseMirror：‘这个节点是一个整体，光标不能跑进去，要么选中整个卡片，要么不选’。
• 通过 Tiptap + ProseMirror 的现代化技术栈，我们成功将‘低保真’的绘图式卡片，进化为具备完整生命周期、状态管理和复杂交互的‘应用级’组件。
• 在 B 站的专栏编辑器里，你看到的，就是真实的。

📊 文章信息

AI 评分：86

来源：哔哩哔哩技术

作者：哔哩哔哩技术

分类：软件编程

语言：中文

阅读时间：20 分钟

字数：4861

标签： 富文本编辑器, ProseMirror, Tiptap, 前端架构, 性能优化

阅读完整文章