contenteditable div含<br>时光标标签包裹失效，求实现方案

针对你遇到的在包含<br>标签的div空行中无法插入文本的问题，核心是先将光标定位到一个可操作的节点内部，再执行插入逻辑。以下是具体实现步骤：

1. 实现光标包裹函数 #

先写一个函数，自动检测空行光标位置并将其包裹到空<span>中：

function wrapCaretInSpan(target) {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;
  
  const range = selection.getRangeAt(0);
  
  // 情况1：光标在空文本节点中（比如BR后的空白区域）
  if (range.startContainer.nodeType === Node.TEXT_NODE && 
      range.startOffset === range.endOffset && 
      range.startContainer.textContent.length === 0) {
    const span = document.createElement('span');
    span.appendChild(document.createTextNode(''));
    range.insertNode(span);
    // 重新定位光标到span内部
    range.setStart(span.firstChild, 0);
    range.setEnd(span.firstChild, 0);
    selection.removeAllRanges();
    selection.addRange(range);
  } 
  // 情况2：光标在编辑器容器的末尾（BR之后的容器末尾）
  else if (range.startContainer === target && range.startOffset === target.childNodes.length) {
    const span = document.createElement('span');
    span.appendChild(document.createTextNode(''));
    target.appendChild(span);
    range.setStart(span.firstChild, 0);
    range.setEnd(span.firstChild, 0);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

2. 改造插入函数 #

在你原有的插入函数中，先调用光标包裹函数，再执行插入逻辑：

function handleInsert({ target, currentTarget }) {
  // 先确保光标处于节点内部
  wrapCaretInSpan(target);
  
  // 执行原有的插入/标签分割逻辑
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  
  const range = selection.getRangeAt(0);
  // 替换成你需要插入的内容
  const insertNode = document.createTextNode('插入的自定义文本'); 
  
  // 插入节点
  range.insertNode(insertNode);
  
  // 调整光标到插入内容之后，提升用户体验
  range.setStartAfter(insertNode);
  range.setEndAfter(insertNode);
  selection.removeAllRanges();
  selection.addRange(range);
  
  // 可选：插入后移除空的span节点（如果不需要保留）
  const emptySpan = insertNode.previousElementSibling;
  if (emptySpan?.tagName === 'SPAN' && emptySpan.textContent === '') {
    emptySpan.remove();
  }
}

关键逻辑说明 #

• 函数会自动识别两种空行光标场景：空文本节点、容器末尾，确保光标被包裹到<span>内部，让原有的标签分割逻辑能正常处理。
• 插入后可以选择移除空<span>，避免编辑器中残留无用节点。
• 完全兼容你现有函数的target和currentTarget参数，不需要修改原有调用逻辑。

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