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)">。
- 拦截
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 artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" 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：它在每次输入、粘贴、删除后立即触发，响应更及时
真正麻烦的不是“怎么让它可编辑”，而是“怎么让它只按你想要的方式编辑”——从焦点控制、粘贴清洗、换行标准化到内容提取，每一步都得主动干预。浏览器不会替你做决定，只会按自己的规则执行。
