类Word界面WYSIWYG编辑器内容分页实现技术咨询

要实现独立多页的类Word文档效果，核心解决固定页尺寸、内容自动跨页流转两个问题即可，具体实现方案如下：

单页固定宽高跨设备一致实现 #

不要用随视口变化的相对单位做页面尺寸基准，直接锁定物理纸张对应像素值即可保证全设备尺寸统一：

• 以通用A4纸为例，96DPI标准下对应固定像素尺寸为宽794px、高1123px（对应实体尺寸210mm×297mm），其他纸张规格按相同DPI标准换算固定像素值即可。不要用cm/mm/vw/%这类单位——不同浏览器对物理单位的换算逻辑有差异，相对单位会随屏幕尺寸变化，都无法保证尺寸一致。
• 给页面元素加固定盒模型规则，避免内边距、边框撑大尺寸，基础样式参考：

.document-wrapper {
  background: #e5e5e5;
  min-height: 100vh;
  padding: 24px 0;
}
.document-page {
  box-sizing: border-box;
  width: 794px;
  height: 1123px;
  padding: 96px; /* 对应Word默认1英寸页边距 */
  margin: 0 auto 16px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  overflow: hidden;
  position: relative;
}

• 小屏场景不需要修改页面本身尺寸，通过CSS缩放适配即可：监听窗口尺寸，当视口宽度小于页面总宽度时，按比例缩放所有页面，保证页面完整显示、比例完全不变，不会出现变形。适配逻辑参考：

function adjustPageScale() {
  const pageWidth = 794
  const horizontalPadding = 48
  const scale = window.innerWidth < pageWidth + horizontalPadding 
    ? (window.innerWidth - horizontalPadding) / pageWidth 
    : 1
  document.querySelectorAll('.document-page').forEach(page => {
    page.style.transform = `scale(${scale})`
    page.style.transformOrigin = 'top center'
    page.style.marginBottom = `${16 * scale}px`
  })
}
window.addEventListener('resize', adjustPageScale)
adjustPageScale()

内容溢出自动跨页流转实现 #

不要用全量重排的逻辑处理分页，用「局部溢出检测+节点移动」的方案，完全可以支撑WYSIWYG编辑器实时输入的性能要求：

• 初始化阶段先处理用户手动插入的page/page-break标记：逐段遍历内容，遇到标记就截断当前内容存入当前页，新建空白页承接标记后的内容，标记本身替换为不可见的分页占位即可。
• 用MutationObserver监听所有页面的内容变更（覆盖输入、粘贴、格式修改、插入媒体等所有场景，比单纯监听输入事件更全面），每次变更后只从触发变化的当前页开始做溢出处理：
  • 溢出判定规则：对比页面的scrollHeight和clientHeight，如果scrollHeight > clientHeight即判定为内容溢出。
  • 溢出处理逻辑：从当前页的最后一个子节点开始，逐个将节点移动到当前页的下一个同级页面；如果不存在下一页，就新建空白的.document-page插入到当前页后面。每移动一个节点就重新检测当前页是否还溢出，直到当前页高度符合要求为止。
  • 空白回填逻辑：处理完当前页溢出后，检查前序页面是否有剩余高度，如果有就把下一页开头的节点逐个移回前序页面，直到前序页面填满，避免出现页面留大块空白的问题。
  • 递归处理：当前页处理完后，再对刚移入内容的下一页做同样的溢出检测，避免内容移过去之后导致下一页溢出。
• 性能优化细节：
  • 不需要每次变更都从第一页开始遍历全文档，只处理变更关联的前后相邻页面即可，绝大多数输入场景下只需要处理1-2页内容，不会出现卡顿。
  • 单个长文本段落溢出时，不要直接把整个段落移到下一页，逐字/逐词拆分段落尾部内容移到下一页，直到当前页刚好填满，减少页面空白。
  • 图片、表格、代码块这类不可拆分的块级元素，直接判断元素位置，如果元素顶部超出页面可视范围就整体移到下一页，不要拆分元素本身。

核心逻辑简化代码参考：

// 新建空白页工具函数
function createEmptyPage() {
  const page = document.createElement('div')
  page.className = 'document-page'
  page.setAttribute('contenteditable', 'true')
  return page
}

// 单页溢出处理
function processPageOverflow(page) {
  // 循环处理直到当前页无溢出
  while (page.scrollHeight > page.clientHeight) {
    let nextPage = page.nextElementSibling
    if (!nextPage?.classList.contains('document-page')) {
      nextPage = createEmptyPage()
      page.after(nextPage)
    }
    // 把当前页最后一个节点移到下一页顶部
    const lastChild = page.lastChild
    if (!lastChild) break
    nextPage.prepend(lastChild)
  }

  const nextPage = page.nextElementSibling
  if (nextPage?.classList.contains('document-page')) {
    // 递归处理下一页溢出
    processPageOverflow(nextPage)
    // 尝试把下一页内容回填到当前页，减少空白
    while (nextPage.firstChild) {
      const testNode = nextPage.firstChild
      page.appendChild(testNode)
      // 回填后如果当前页溢出，就把节点移回下一页，停止回填
      if (page.scrollHeight > page.clientHeight) {
        nextPage.prepend(testNode)
        break
      }
    }
  }
}

// 监听内容变化
const contentObserver = new MutationObserver((records) => {
  records.forEach(record => {
    const currentPage = record.target.closest('.document-page')
    if (currentPage) processPageOverflow(currentPage)
  })
})
contentObserver.observe(document.querySelector('.document-wrapper'), {
  childList: true,
  subtree: true,
  characterData: true
})

内容的提问来源于stack exchange，提问作者James Ridge