富文本编辑器从零实现(12 节课)
富文本编辑器是前端公认的硬骨头:从 contentEditable 的古怪行为讲起,一步步驯服 Selection 与 Range,最终从零做出一个可用的编辑器。
第一章 · contentEditable 与选区模型2 节
contentEditable:浏览器原生的富文本能力Selection 与 Range:光标与选区的模型
第二章 · 命令式格式(去 execCommand)2 节
命令式加粗:不用 execCommand 手写 Bold块级格式:标题与列表的块节点操作
第三章 · 数据模型与序列化2 节
数据模型:HTML 与自定义 JSON 节点树互转序列化:文档模型存盘与加载
第四章 · 输入处理、历史与媒体3 节
输入处理:拦截粘贴,把富文本洗成纯文本撤销重做:基于历史栈的 Undo/Redo插入图片与链接:在光标处注入节点
第五章 · 协同、性能与选型3 节
协同编辑基础:多标签页实时同步性能:大文档的节流渲染与增量更新总览与选型:自研 vs ProseMirror/Slate/Lexical/TipTap