优化带white-space:pre-wrap的contenteditable回车插入换行方案

我来帮你搞定这个问题！你的核心需求是让设置了white-space: pre-wrap的contenteditable元素，按下Enter时只插入纯换行符，同时保证textContent和显示内容完全一致，还要解决撤销历史异常、末尾换行不可见的问题。下面是经过优化的可靠方案：

完整实现代码 #

HTML #

<div id="trg" contenteditable></div>

CSS #

#trg {
  white-space: pre-wrap;
  padding: 8px;
  border: 1px solid #ccc;
  min-height: 100px;
  font-family: monospace; /* 可选，让换行对齐更直观 */
}

JavaScript #

const trg = document.querySelector('#trg');

trg.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault(); // 阻止浏览器默认的块级元素插入行为
    
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    
    // 先删除选中的内容（如果用户选中了文本）
    range.deleteContents();
    
    // 创建纯文本换行节点
    const newlineNode = document.createTextNode('\n');
    range.insertNode(newlineNode);
    
    // 将光标定位到换行符的后方，确保输入流畅
    range.setStartAfter(newlineNode);
    range.collapse(true);
    selection.removeAllRanges();
    selection.addRange(range);
  }
});

trg.addEventListener('input', () => {
  console.log('当前textContent:', trg.textContent);
  console.log('显示内容与textContent一致:', trg.textContent === trg.innerText);
});

// 页面加载后自动聚焦
trg.focus();

方案优势与问题解析 #

为什么这个方案能解决你的痛点？ #

1. 原生文本节点操作，避免撤销历史异常
   放弃了execCommand这种老旧且行为不可控的API，改用Range和Selection直接操作文本节点。插入的是纯\n文本，浏览器会正确记录撤销历史，按下Ctrl+Z不会出现多余的!字符。

2. 确保textContent与显示完全匹配
   手动插入的是纯文本换行符，textContent会直接包含这个换行，而white-space: pre-wrap会让浏览器正确渲染换行，实现显示内容和textContent完全一致。

3. 解决末尾换行不可见与光标问题
   通过Range精确控制光标位置，插入换行后自动将光标移到换行后方，哪怕是在元素末尾插入换行，也能正常显示且光标不会丢失。

你之前方案的问题根源 #

• 用execCommand('insertHTML')插入\n是无效的，因为HTML解析器不会将\n当作文本换行，所以你不得不加!再删除，这就导致撤销历史中留下了多余的操作记录。
• 浏览器默认的contenteditable行为在white-space: pre-wrap下，按下Enter会插入<div><br></div>这类块级元素，这就是为什么你需要按两次回车才能看到换行——我们通过e.preventDefault()阻止了这个默认行为，直接插入纯文本换行，一次回车就生效。

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