如何在contenteditable元素中按回车时插入 而非 ？

有两种实用的解决思路，根据你的需求选择：

方案1：提取文本时批量替换（最简单） #

不需要修改编辑器的输入行为，在获取textContent后直接把所有\n替换成\r\n，代码示例：

// 获取编辑器元素
const editor = document.querySelector('[contenteditable="true"]');
// 获取文本并替换换行符
const rawContent = editor.textContent;
const formattedContent = rawContent.replace(/\n/g, '\r\n');
// 后续保存formattedContent到文件即可

这个方法的优势是实现成本极低，不会影响用户在编辑器里的输入体验，适合大多数场景。

方案2：拦截回车事件，自定义插入换行 #

如果需要在输入阶段就确保换行符是\r\n，可以监听编辑器的keydown事件，拦截Enter键的默认行为，手动插入包含\r\n的文本节点：

const editor = document.querySelector('[contenteditable="true"]');

editor.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    e.preventDefault(); // 阻止默认的块元素换行行为
    const selection = window.getSelection();
    const range = selection.getRangeAt(0);
    
    // 创建包含\r\n的文本节点
    const lineBreakNode = document.createTextNode('\r\n');
    // 删除当前光标选中的内容（如果有的话）
    range.deleteContents();
    // 插入换行节点
    range.insertNode(lineBreakNode);
    
    // 将光标移动到换行后的位置
    range.setStartAfter(lineBreakNode);
    range.setEndAfter(lineBreakNode);
    selection.removeAllRanges();
    selection.addRange(range);
  }
});

注意：部分浏览器可能会对文本节点中的\r做自动处理，所以最终提取textContent时可能仍需要结合方案1的替换操作，确保万无一失。

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