contenteditable="true"仅开启编辑能力，需配合tabindex、paste拦截、Enter处理等才能安全可用；否则易致光标丢失、XSS漏洞或格式混乱。
直接加 contenteditable="true" 不等于能用——它只是打开浏览器编辑引擎的开关，没配好 tabindex、不拦截 paste、不处理 Enter，轻则光标消失、粘贴带 <script></script>，重则 XSS 漏洞上线。
为什么写了 contenteditable="true" 却点不动或 Tab 进不去
因为 div、p 等非表单元素默认不可键盘聚焦，contenteditable 不会自动加 tabindex。
- 必须显式加
tabindex="0"：让元素进入 Tab 链，支持 Ctrl+B/Ctrl+I 等快捷键 - 只写
tabindex="-1"：只能靠 JS 调用.focus()，无法键盘切换 - 漏掉这步时，鼠标点击能打字，但 Selection API 和
document.execCommand全部失效——因为没焦点 - CSS 中若存在
pointer-events: none或user-select: none，也会彻底屏蔽点击
粘贴富文本时为什么带样式甚至 script 标签
这不是 bug，是浏览器原生行为：复制自 Word、微信、网页的内容，默认以完整 HTML 片段插入，包括内联样式、<meta>、不可见字符，甚至 <img onerror="alert(1)" alt="深入剖析HTML内容可编辑：contenteditable标签属性" >。
- 拦截
paste事件，用event.clipboardData.getData('text/plain')提纯文本最稳妥 - 避免直接用
execCommand('insertText')：该 API 已废弃，Chrome 98+ 移除部分命令 - 不要依赖
plaintext-only：不是标准值，Firefox 忽略，Safari 行为未统一，别当生产方案 - 若需保留换行，可用
el.innerHTML.replace(/<[^>]+>/g, '').replace(/\n/g, '<br>')
，但仅限可信内容
回车后生成 div/p/br，怎么统一换行语义
不同浏览器对 Enter 的默认处理差异极大：Chrome 插入 <div>，Firefox 插入 <pre class="brush:php;toolbar:false;"><br></pre>，Safari 可能插 <code><p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill5806" title="html-deploy">html-deploy</a>
<p>使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>，导致后端解析混乱或样式错位。
立即学习“前端免费学习笔记（深入）”；
- 监听
keydown，对Enter调用event.preventDefault() - 手动插入统一节点，比如
document.execCommand('insertHTML', false, '<br>')（兼容过渡）或用 Range API 插入textNode - 禁用默认换行后，
Shift+Enter可作为软换行保留，需额外判断event.shiftKey - 注意：空块级元素（如
<p></p>）在 Firefox 中可能无法响应 click，建议初始化时填入 或<br>
读取内容时 innerHTML 和 textContent 到底选哪个
innerHTML 返回渲染后的 HTML 字符串，含冗余标签和潜在风险；textContent 返回纯文本，丢弃所有格式，包括换行。
- 存摘要、做搜索、校验长度 → 用
el.textContent，安全且轻量 - 需保留粗体/斜体等基础格式 → 清洗
el.innerHTML，例如过滤<script></script>、onerror属性、style内联样式 - 别用
value：contenteditable 元素没有该属性，读取必报undefined - 监听变更优先用
input事件，而非blur：它在每次输入、粘贴、删除后立即触发，响应更及时
真正麻烦的不是“怎么让它可编辑”，而是“怎么让它只按你想要的方式编辑”——从焦点控制、粘贴清洗、换行标准化到内容提取，每一步都得主动干预。浏览器不会替你做决定，只会按自己的规则执行。
