如何在beforeinput事件中获取未渲染的h1/p元素高度？（Lit.js）

要在beforeinput事件中获取即将插入的<h1>或<p>元素的尺寸，核心思路是模拟创建目标元素并在隐藏容器中预计算尺寸——因为该事件触发时目标元素尚未插入DOM，无法直接获取其尺寸。结合Lit.js的实现如下：

步骤1：添加隐藏的测量容器 #

在组件的渲染模板中，新增一个与编辑器样式完全一致的隐藏容器，用于模拟元素渲染并计算尺寸：

import { LitElement, html, css } from 'lit';

class EditableEditor extends LitElement {
  static styles = css`
    .editor {
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
      padding: 10px;
      font-family: Arial, sans-serif;
      font-size: 16px;
    }

    .editor-measure {
      position: absolute;
      visibility: hidden;
      pointer-events: none;
      /* 继承编辑器的关键样式，保证尺寸计算准确 */
      width: inherit;
      padding: inherit;
      font: inherit;
    }
  `;

  render() {
    return html`
      <div class="editor" contenteditable="true" @beforeinput=${this._beforeInput} placeholder="TR"></div>
      <div class="editor-measure"></div>
    `;
  }
}

步骤2：在beforeinput事件中处理尺寸计算 #

根据不同的输入类型（如设置格式、粘贴元素），创建对应元素并放入测量容器计算尺寸，再与编辑器边界对比：

_beforeInput(e) {
  const editorEl = this.renderRoot.querySelector('.editor');
  const measureContainer = this.renderRoot.querySelector('.editor-measure');
  const editorRect = editorEl.getBoundingClientRect();

  // 处理「设置段落格式」操作（比如将文本转为h1/p）
  if (e.inputType === 'formatBlock') {
    const tagName = (e.data || document.queryCommandValue('formatBlock')).toUpperCase();
    if (!['H1', 'P'].includes(tagName)) return;

    // 创建测试元素并复制编辑器样式
    const testEl = document.createElement(tagName);
    const editorStyle = getComputedStyle(editorEl);
    testEl.style.fontSize = editorStyle.fontSize;
    testEl.style.fontFamily = editorStyle.fontFamily;
    testEl.style.lineHeight = editorStyle.lineHeight;

    // 填充文本（使用选中的文本或默认测试文本）
    const range = e.getTargetRanges()[0];
    testEl.textContent = range.toString() || '测试文本';

    // 放入测量容器计算尺寸
    measureContainer.appendChild(testEl);
    const { offsetWidth, offsetHeight } = testEl;

    // 判断是否超出编辑器边界
    if (offsetWidth > editorRect.width || offsetHeight > editorRect.height) {
      e.preventDefault();
      console.log(`${tagName}元素超出编辑器边界，已阻止插入`);
    }

    // 清理测试元素
    measureContainer.removeChild(testEl);
  }

  // 处理「粘贴元素」操作
  else if (e.inputType === 'insertFromPaste') {
    const clipboardHtml = e.clipboardData.getData('text/html');
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = clipboardHtml;

    // 遍历粘贴内容中的h1/p元素
    const targetEls = tempDiv.querySelectorAll('h1, p');
    targetEls.forEach(el => {
      const testEl = el.cloneNode(true);
      // 继承编辑器样式
      const editorStyle = getComputedStyle(editorEl);
      testEl.style.fontSize = editorStyle.fontSize;
      testEl.style.fontFamily = editorStyle.fontFamily;

      measureContainer.appendChild(testEl);
      const { offsetWidth, offsetHeight } = testEl;

      if (offsetWidth > editorRect.width || offsetHeight > editorRect.height) {
        e.preventDefault();
        console.log(`${el.tagName}元素超出编辑器边界，已阻止粘贴`);
      }

      measureContainer.removeChild(testEl);
    });
  }
}

关键说明 #

• 测量容器与编辑器共享核心样式（字体、内边距、宽度），确保计算出的尺寸与实际插入后的尺寸一致。
• 针对不同的输入类型（formatBlock/insertFromPaste）做针对性处理，覆盖常见的富文本编辑场景。
• 计算完成后立即清理测试元素，避免内存占用。

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