如何为contenteditable div光标位置设置PX字号及后续输入应用字号

这问题我之前做富文本编辑器的时候踩过坑！核心就是要主动维护当前的字号状态，并把这个状态绑定到编辑器的光标上下文里，这样新输入的内容才能自动继承选中的字号。我给你拆解一下实现思路和代码：

核心思路 #

1. 用一个变量跟踪用户当前选中的字号（比如currentFontSize），默认设为常用的16px。
2. 当用户通过下拉框选择字号时：
   • 先更新这个状态变量
   • 如果有选中文本，执行你已经写好的「修改选中文本字号」逻辑
   • 如果没有选中文本（光标处于闪烁状态），直接给光标位置注入带有当前字号的格式容器，后续输入的内容会自动继承这个样式
3. 额外监听编辑器的聚焦、光标移动事件，确保用户切换光标位置时，格式能自动同步到当前选中的字号

完整代码实现 #

HTML结构 #

<select id="fontSizeSelector">
  <option value="12px">12px</option>
  <option value="16px" selected>默认16px</option>
  <option value="24px">24px</option>
  <option value="32px">32px</option>
</select>
<div id="richEditor" contenteditable="true" style="border:1px solid #ddd; padding:10px; min-height:150px;"></div>

JavaScript逻辑 #

// 初始化当前字号状态
let currentFontSize = '16px';
const editor = document.getElementById('richEditor');
const fontSizeSelector = document.getElementById('fontSizeSelector');

// 处理下拉框的字号选择事件
fontSizeSelector.addEventListener('change', function() {
  currentFontSize = this.value;
  const selection = window.getSelection();

  // 情况1：有选中文本，执行你已有的修改逻辑
  if (!selection.isCollapsed) {
    // 这里可以替换成你自己已实现的选中文本改字号代码
    // 示例用execCommand（虽标记废弃，但浏览器兼容性好）：
    document.execCommand('styleWithCSS', false, true);
    document.execCommand('fontSize', false, currentFontSize);
  } 
  // 情况2：没有选中文本，给光标位置应用当前字号
  else {
    applyFontSizeToCursor();
  }
});

// 给光标位置注入带字号的容器
function applyFontSizeToCursor() {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);
  if (range.collapsed) {
    // 创建一个带当前字号的span
    const styleSpan = document.createElement('span');
    styleSpan.style.fontSize = currentFontSize;

    // 把span插入到光标位置
    range.insertNode(styleSpan);
    // 把光标移到span内部，确保后续输入在span里
    range.setStart(styleSpan, 0);
    range.setEnd(styleSpan, 0);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

// 监听编辑器聚焦事件：聚焦时自动应用当前字号
editor.addEventListener('focus', () => {
  setTimeout(() => {
    const selection = window.getSelection();
    if (selection.isCollapsed) applyFontSizeToCursor();
  }, 0);
});

// 监听光标移动事件：确保光标切换位置时，格式同步到当前选中字号
document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  // 判断光标是否在编辑器内且处于未选中状态
  if (selection.isCollapsed && editor.contains(selection.anchorNode)) {
    // 获取光标所在位置的当前字号
    let currentNode = selection.anchorNode;
    let computedSize = window.getComputedStyle(currentNode).fontSize;
    // 向上遍历父元素，找到实际生效的字号（避免文本节点继承默认样式）
    let parent = currentNode.parentNode;
    while (parent !== editor && parent !== document.body) {
      const parentSize = window.getComputedStyle(parent).fontSize;
      if (parentSize !== 'medium') { // medium是浏览器默认字号的计算值
        computedSize = parentSize;
        break;
      }
      parent = parent.parentNode;
    }
    // 如果当前位置字号和选中的不一致，就应用选中的字号
    if (computedSize !== currentFontSize) {
      applyFontSizeToCursor();
    }
  }
});

关键细节说明 #

• 为什么要用setTimeout在focus事件里？因为编辑器聚焦时，光标位置的初始化可能有延迟，延迟0毫秒能确保我们拿到正确的选区对象。
• 向上遍历父元素找字号：因为文本节点本身可能没有设置字号，是继承父元素的，所以要找到实际控制字号的那个元素。
• 如果不想用execCommand，可以完全用Range API来修改选中文本的样式（比如给选中内容包裹带字号的span），这部分你已经实现了，直接替换掉示例里的execCommand代码就行。

这样就能完美实现你要的两个场景：

1. 先选字号再输入：光标位置已经被注入带字号的span，输入的内容自动继承样式
2. 输入一段后改字号再输入：改字号时光标位置会被注入新的span，新输入的内容用新字号

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