在Web端构建类Google Docs的文档工具时，动态分页是核心体验之一。用户连续输入，内容在填满一页后自动流向第二页，且缩放窗口时能重新计算页数与断点，这要求前端具备精确的内容高度测量与灵活的布局重组能力。
为什么不能直接用CSS多列或打印分页
很多初学者会想到使用CSS的column-count或者break-after相关属性来模拟分页。这些属性原本面向印刷与打印场景，在可编辑的富文本环境下并不可控。比如column-count会把内容均分宽度而非按页高截断，且无法让光标在跨列时保持自然顺序。打印分页规则在屏幕实时编辑时也不会触发重新布局回流，难以做到随窗口变化而即时调整。
另一个误区是预先设定每行高度然后用字符数估算分页。中英文混排、图片、表格都会让行高产生跳变，估算值与实际渲染高度偏差累积后，会出现一页底部大片空白或文字被硬切。因此必须依赖真实DOM测量，而不是数学假设。
核心页面模型设计
我们将文档拆分为多个“页”组件，每一页是一个固定高度的容器。所有块级内容（段落、标题、图片）作为子节点排列。当某一页的内容总高度超过阈值，就把溢出节点移动到下一页。为此需要维护一个扁平的块数组，以及每页容纳哪些块索引的范围。
在React中推荐用受控数据描述文档：一个blocks数组保存所有段落对象，pages状态保存分页结果。渲染时先根据pages把块分配到对应容器。这样避免了直接操作DOM导致的虚拟DOM不一致。
function DocEditor() {
const [blocks, setBlocks] = useState([
{ id: 1, text: '第一段内容' },
{ id: 2, text: '第二段内容' }
]);
const [pages, setPages] = useState([[1, 2]]);
return (
<div className="doc">
{pages.map((range, idx) => (
<Page key={idx} blocks={blocks.filter(b => b.id >= range[0] && b.id <= range[1])} />
))}
</div>
);
}
使用ResizeObserver与偏移量测量
每一页容器渲染后，我们用ResizeObserver监听其尺寸变化。当容器高度改变（例如用户调整缩放比例），触发重新分页。测量时遍历所有块节点，通过getBoundingClientRect或offsetTop判断哪些块落在当前页高度内。
具体做法是：先清空分页，把块依次放入临时页，累加高度，一旦超过页高就把当前块及后续块推入下一页。为避免图片未加载完导致高度不准，需要等onload后再测量，或给图片预设宽高。
function paginate(blocks, pageHeight) {
const result = [];
let current = [];
let acc = 0;
blocks.forEach(b => {
const h = b.renderHeight || 24;
if (acc + h > pageHeight && current.length > 0) {
result.push(current);
current = [];
acc = 0;
}
current.push(b.id);
acc += h;
});
if (current.length) result.push(current);
return result;
}
contenteditable下的光标保持
如果用contenteditable实现输入，重分页会造成DOM节点移动，浏览器默认会丢失选区。解决方式是在分页前用window.getSelection记录锚点字符偏移，分页后重新定位。可以借助Range与TreeWalker在指定块内恢复光标。
另一个实践是尽量只对“已确定完成输入”的块做迁移，当前正在编辑的块暂不移动，等失焦或换行时再整体重算。这样能显著减少输入过程中的跳动感，也是Google Docs采用延迟分页的策略之一。
性能与避坑要点
频繁测量会触发回流，在长文档中可能造成输入延迟。应当节流ResizeObserver回调，并使用requestAnimationFrame合并分页计算。此外，不要把分页状态放进每次按键都更新的全局state，可用useRef暂存，仅在稳定后提交。
常见的错误还包括：给页面容器加overflow:hidden却忘记算内边距，导致最后一行的高度被裁；或者在服务端渲染时直接执行测量，因无DOM而报错。应当把测量逻辑包裹在useEffect中，确保只在客户端运行。
| 方案 | 优点 | 缺点 |
|---|---|---|
| CSS分栏 | 无需脚本 | 不可编辑、不按页高 |
| 高度估算 | 计算快 | 误差大、难含图片 |
| DOM实测分页 | 精准、体验好 | 需处理光标与性能 |
小结与扩展
动态分页的本质是“数据驱动视图，视图反哺数据”。在React中以块数组为单一数据源，结合ResizeObserver与真实高度测量，就能实现顺滑的Google Docs式翻页。后续可加入页眉页脚、连续页码与导出PDF对齐，使编辑器更完整。
如果项目允许，也可考虑基于已有的开源文档引擎做二次封装，但理解上述测量与重排原理，仍有助于排查卡顿与错位问题。
React动态分页contenteditable修改时间：2026-08-09 10:57:37