contenteditable 中粘贴代码丢失缩进和换行，因浏览器默认解析HTML导致空格压缩、换行忽略；需监听paste事件提取纯文本插入，并用pre-wrap+tab-size+monospace CSS保留格式，高亮时须防DOM重绘失焦。
contenteditable 元素里粘贴代码会丢失缩进和换行
直接设置 contenteditable="true" 的 <div> 或 <pre> 粘贴 Python/JS 代码时，浏览器默认把连续空格压缩成一个、把 \n 当成普通换行（不保留语义），导致缩进全乱、if 块直接垮掉。
根本原因是：浏览器在 contenteditable 中对粘贴内容做 HTML 解析，空格被转成 或丢弃，\n 被忽略或转为 <br>，而非保留原始文本结构。
- 临时解法：粘贴后按
Ctrl+Shift+V（纯文本粘贴），但用户不会总记得 - 可靠做法：监听
paste事件，阻止默认行为，手动提取event.clipboardData.getData('text/plain')，再用document.execCommand('insertText', false, ...)插入（注意：该 API 已废弃但目前仍最稳） - 更现代的替代：用
getSelection().getRangeAt(0).insertNode(...)插入Text节点，但需手动处理光标位置，兼容性略差
用 CSS 保证 pre + code + white-space 才能真正保留缩进
contenteditable 本身不关心缩进，靠 CSS 控制渲染。只设 white-space: pre 不够——它会让所有空格可见，但可能撑破容器；pre-wrap 更实用，换行保留、空格保留、自动折行。
- 必须包裹在
<pre><code>...</code></pre>结构里，且<code>设display: block（否则内联元素不响应white-space） - 关键样式：
code[contenteditable] { white-space: pre-wrap; tab-size: 4; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; } - 别漏掉
tab-size：否则粘贴含 Tab 的代码，显示宽度可能只有 2 或 8，和编辑器不一致
简单高亮只能靠正则 + innerHTML 替换，别碰 AST
真语法高亮要解析 AST，对“简单编辑器”是过度设计。用正则匹配关键词、字符串、注释，套上 <span class="token-string"> 是合理取舍。
立即学习“前端免费学习笔记（深入）”；
- 每次输入后（
input或keydown后防抖 200ms）触发重绘：element.innerHTML = highlight(element.textContent) - 高亮函数必须先用
textContent取纯文本，避免把已有<span>标签当代码再套一层 - 常见坑：正则没加
g标志只替换第一个；字符串匹配没处理转义引号（"a\"b"）；注释正则写成/\/\/.*/会吞掉整行（包括后续代码） - 示例片段（JS 关键词）：
text.replace(/\b(function|return|const|let|var)\b/g, '<span class="token-keyword">$1</span>')
focus 和光标位置在 innerHTML 重写后会丢失
每次 innerHTML = ... 都会销毁并重建 DOM 子节点，光标必然回到开头，用户无法连续编辑。
- 必须在重写前用
getSelection().getRangeAt(0)记录光标偏移（相对于textContent），重写后再用range.setStart(node, offset)恢复 - 更简单但有局限的做法：只高亮「当前行」，用
element.innerText.split('\n')定位光标所在行号，仅对该行做innerHTML替换，其余行保持原样（DOM 节点不重建） - 别依赖
selectionStart/selectionEnd：它们只对<input>和<textarea>有效，对contenteditable元素无效
contenteditable 在反复 DOM 操作中不“吞”光标、不崩缩进、不误解析粘贴内容——这些细节没处理好，用户打两行代码就放弃。 
