笔记应用添加contenteditable代码块：回车行为与光标定位问题求解

一、处理Enter键默认生成div的问题 #

直接监听代码块的keydown事件，阻止默认行为后插入换行标签，就能避免生成新div：

const codeBlock = document.querySelector('.your-code-block-class');
codeBlock.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    // 插入换行，保持内容在同一代码块内
    document.execCommand('insertHTML', false, '<br>');
  }
});

如果需要支持Shift+Enter换段落（可选），可以加判断：

if (e.key === 'Enter' && !e.shiftKey) {
  e.preventDefault();
  document.execCommand('insertHTML', false, '<br>');
}

二、嵌套HTML元素下的光标位置获取与定位 #

当contenteditable元素内有嵌套的<p>或其他标签时，不能用普通input的selectionStart/selectionEnd，得用Selection和Range API来实现：

获取光标在代码块中的文本偏移量 #

function getCodeBlockCursorPos(codeBlock) {
  const selection = window.getSelection();
  if (selection.rangeCount === 0) return 0;
  
  const cursorRange = selection.getRangeAt(0);
  const fullRange = document.createRange();
  fullRange.selectNodeContents(codeBlock);
  fullRange.setEnd(cursorRange.startContainer, cursorRange.startOffset);
  
  return fullRange.toString().length;
}

设置光标到指定文本偏移量 #

function setCodeBlockCursorPos(codeBlock, targetPos) {
  const selection = window.getSelection();
  const fullRange = document.createRange();
  fullRange.selectNodeContents(codeBlock);
  
  let currentNode = fullRange.startContainer;
  let currentOffset = 0;

  while (currentNode) {
    if (currentNode.nodeType === Node.TEXT_NODE) {
      const textLen = currentNode.textContent.length;
      if (currentOffset + textLen >= targetPos) {
        const range = document.createRange();
        range.setStart(currentNode, targetPos - currentOffset);
        range.setEnd(currentNode, targetPos - currentOffset);
        selection.removeAllRanges();
        selection.addRange(range);
        return;
      }
      currentOffset += textLen;
    }
    currentNode = currentNode.nextSibling;
  }
}

实际使用示例 #

比如在需要保存光标位置或者操作文本时调用：

// 获取光标位置
const currentPos = getCodeBlockCursorPos(codeBlock);
// 做一些文本操作后，把光标放回原来的位置
setCodeBlockCursorPos(codeBlock, currentPos);

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