基于contenteditable的原生JS WYSIWYG编辑器如何将光标移出当前编辑元素

问题原因 #

直接修改innerHTML追加闭合标签+新标签的思路不符合DOM操作逻辑：浏览器解析innerHTML时会自动补全不完整的标签，不会按照你预期拆分当前元素；依赖selection.modify逐字符移动光标的方案兼容性和稳定性都很差，遇到富文本格式、换行场景就会失效。

实现思路 #

基于原生Range和Selection API实现，支持任意位置插入新行并移动光标，步骤如下：

• 先定位当前光标所在的行元素（即编辑器的直接子div）
• 创建新的空行节点，插入到当前行的后方
• 用Range API直接定位到新行内部，把选区设置到对应位置即可

完整代码实现 #

const editor = document.getElementById('editor');

// 工具函数：获取当前光标所在的行元素（editor的直接子div）
function getCurrentRow() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return null;
  let el = selection.anchorNode;
  // 如果是文本节点就取父元素
  if (el.nodeType === Node.TEXT_NODE) el = el.parentElement;
  // 向上查找直到是editor的直接子元素
  while (el && el.parentElement !== editor) {
    el = el.parentElement;
  }
  return el;
}

// 实现需求：在当前行后插入新行，并将光标移动到新行中
function insertNewLineAfterCurrent() {
  const currentRow = getCurrentRow();
  if (!currentRow) return;
  // 创建新行，空div在contenteditable中可能无高度，加个零宽空格保证可聚焦
  const newRow = document.createElement('div');
  newRow.textContent = '\u200B';
  // 插入到当前行后面
  currentRow.parentNode.insertBefore(newRow, currentRow.nextSibling);
  // 移动光标到新行中
  const selection = window.getSelection();
  const range = document.createRange();
  range.selectNodeContents(newRow);
  range.collapse(true); // 光标定位到行首，传false则定位到行尾
  selection.removeAllRanges();
  selection.addRange(range);
}

// 补充你需要的粗体功能实现，个人使用足够
function setBold() {
  const selection = window.getSelection();
  if (!selection.rangeCount || selection.isCollapsed) return;
  const range = selection.getRangeAt(0);
  if (range.commonAncestorContainer.closest('#editor')) {
    const bold = document.createElement('strong');
    range.surroundContents(bold);
    // 光标移动到粗体内容后面
    range.collapse(false);
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

你可以把insertNewLineAfterCurrent函数绑定到对应的快捷键或者按钮触发事件上，即可实现任意位置插入新行并跳转光标的需求。如果需要完全接管Enter换行逻辑，给editor绑定keydown事件，拦截Enter键的默认行为后调用该函数即可。

注意事项 #

零宽空格\u200B不会显示也不会影响内容输入，只是为了保证空行可以正常聚焦，你也可以根据自己的需求换成<br>标签。

内容的提问来源于stack exchange，提问作者J. B