如何为自制WYSIWYG编辑器实现可视化分页（非商业方案）

完全可以实现，而且不需要依赖商业工具。核心思路是基于内容排版高度动态插入分页标记，而非单纯依赖滚动位置——毕竟滚动是用户交互后的结果，实时输入场景下，根据内容高度判断分页点才是更准确的方案。

以下是具体的实现思路和步骤：

1. 先做基础布局设定 #

首先给编辑器容器和页面设定固定尺寸，比如参照A4纸的像素规格（按96DPI换算，A4尺寸约为794×1123px）：

.editor-container {
  width: 794px;
  margin: 0 auto;
  position: relative;
}
/* 可选：给页面加边框，让用户更直观看到页面范围 */
.page-frame {
  width: 100%;
  min-height: 1123px;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 20px;
  box-sizing: border-box;
}
.page-break {
  height: 1px;
  background-color: #ccc;
  margin: 10px 0;
  position: relative;
}
.page-break::after {
  content: "分页符";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 0 8px;
  font-size: 12px;
  color: #999;
}

2. 实时计算内容高度并插入分页标记 #

监听编辑器的内容变化事件，实时计算当前内容的高度分布，判断是否需要插入分页：

const editor = document.querySelector('.editor-container');
const singlePageHeight = 1123; // 单页总高度（含内边距）

function updatePagination() {
  // 先移除已有的分页标记，避免重复插入
  document.querySelectorAll('.page-break').forEach(el => el.remove());

  let currentPageHeight = 0;
  const childElements = [...editor.children].filter(el => el.className !== 'page-break');

  for (let i = 0; i < childElements.length; i++) {
    const el = childElements[i];
    const elHeight = el.offsetHeight;

    // 判断当前元素是否会超出当前页面
    if (currentPageHeight + elHeight > singlePageHeight) {
      // 插入分页标记
      const breakEl = document.createElement('div');
      breakEl.className = 'page-break';
      editor.insertBefore(breakEl, el);
      // 重置当前页面高度，从新页面开始累加
      currentPageHeight = elHeight;
    } else {
      currentPageHeight += elHeight;
    }
  }
}

// 监听内容输入变化
editor.addEventListener('input', updatePagination);
// 兼容富文本编辑的特殊操作（比如粘贴、格式修改）
editor.addEventListener('DOMSubtreeModified', (e) => {
  if (e.target !== editor) updatePagination();
});

3. 实用优化点 #

• 防抖处理：给updatePagination加100ms左右的防抖，避免内容快速输入时频繁计算消耗性能。
• 特殊元素适配：如果编辑器内有浮动、绝对定位的元素，需要用getComputedStyle获取实际占用高度，或者调整分页逻辑。
• 打印适配：打印时可以隐藏分页标记的文字，配合CSS原生分页属性：

@media print {
  .page-break {
    display: none;
  }
  .page-frame {
    page-break-after: always;
    border: none;
    margin: 0;
    padding: 0;
  }
}

关键注意事项 #

不要依赖滚动位置插入分页——滚动是用户主动操作的结果，而实时输入时内容高度会动态变化，基于内容高度的判断才是精准的。另外遍历元素时，要注意过滤掉已插入的分页标记，避免循环混乱。

内容的提问来源于stack exchange，提问作者Matthew Inboden