Progress ABL：实现无滚动条、类书籍排版的多行Editor组件

• 优先用组件自带的自适应高度
  大多数主流富文本Editor组件（比如Quill、ProseMirror封装版或UI框架自带Editor）都支持自动高度配置，直接开启autoHeight或类似属性，关闭垂直滚动条、移除边框后，组件会自动根据内容撑开高度。这种方法完全不用自行计算行数，是最省心的方案，只需给每个Editor设置统一的margin-bottom（比如16px或1em）控制组件间间距即可。

• 简化版预渲染计算行数
  如果必须提前预判行数，不用复杂的文本宽度API，用隐藏DOM元素预渲染的方法更准确且易实现：

  1. 创建一个和Editor样式完全一致的隐藏div（字体、字号、行高、宽度、换行规则都要和目标Editor匹配）；
  2. 将评论内容插入到这个div中；
  3. 通过div的offsetHeight除以行高，就能得到准确的行数。
     示例代码（原生JS）：

  // 匹配Editor的样式
  const calcDiv = document.createElement('div');
  calcDiv.style.cssText = `
    position: absolute;
    visibility: hidden;
    font-size: 16px;
    line-height: 1.6;
    width: 600px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: "Microsoft Yahei", sans-serif;
  `;
  calcDiv.textContent = 你的评论内容;
  document.body.appendChild(calcDiv);
  
  const lineHeight = parseInt(getComputedStyle(calcDiv).lineHeight);
  const totalLines = Math.ceil(calcDiv.offsetHeight / lineHeight);
  
  document.body.removeChild(calcDiv);
  // 用totalLines配置Editor的高度或行数限制
  

• 统一排版样式
  确保所有Editor的字体属性（字号、字重、字体族）、行高、宽度完全一致，避免因样式差异导致的行数计算偏差。组件间的间距建议用margin-bottom，值可以设置为和行高匹配的数值，保持类书籍阅读的流畅感。

• 处理换行符
  如果评论包含硬换行（\r\n/\n），要确保预渲染div和Editor都开启white-space: pre-wrap，这样才能正确识别换行，保证计算的行数和实际展示一致。

内容的提问来源于stack exchange，提问作者4gl Developer