contenteditable="true"是HTML原生可编辑属性，但需配合tabindex、CSS重置及事件监听（如paste/input）来规范粘贴行为、光标定位和内容清洗，否则易出现样式乱码、聚焦异常或XSS风险。
contenteditable 是 HTML 原生属性，设为 true 后，元素及其子节点就变成可编辑区域——不用 JS 监听输入、不用 textarea 或 input 就能直接改网页内容。但它不是“所见即所得编辑器”，开箱即用但行为粗糙，必须主动约束。
为什么 contenteditable="true" 会粘贴乱码或带样式？
浏览器默认把富文本（比如从 Word、微信、网页复制的内容）原样插入，保留 <span style="color:red">、<meta>、不可见字符甚至脚本标签。这不是 bug，是规范行为。
- 解决办法：监听
paste事件，用event.clipboardData.getData('text/plain')强制转纯文本 - 更稳妥的做法是在
oninput或blur时用element.innerText = element.innerText清洗 HTML 标签（注意：这会丢失所有格式，包括换行） - 若需保留换行，可用正则替换：
element.innerHTML = element.innerHTML.replace(/<[^>]+>/g, '').replace(/\n/g, '<br>')，但仅限可信内容
contenteditable 的 focus 和 selection 行为异常
点击空 <div contenteditable></div> 可能无法聚焦，或光标不显示；在 Firefox 中，空块级元素甚至不响应 click。
- 必须确保元素有最小尺寸和视觉反馈：
min-height: 1.2em; padding: 4px; - 首次点击无反应？加
tabindex="0"让它可被键盘聚焦 - 想让光标始终落在末尾？用
getSelection().collapseToEnd()，但要等 DOM 更新完成（建议setTimeout(..., 0)或queueMicrotask） - IE/Edge Legacy 里
document.execCommand已废弃，别依赖它做粗粒度格式控制
如何限制只允许纯文本输入？
设置 contenteditable 不等于获得输入控制权。用户仍可通过拖拽、粘贴、JS 注入等方式塞进 HTML。
立即学习“前端免费学习笔记（深入）”；
- 最轻量方案：监听
input事件 +textContent替换：el.textContent = el.textContent（注意：这会抹掉所有内联元素，包括<br>） - 若需保留换行，用
el.innerText赋值给textContent，再手动将\n转成<br>，但要注意innerText在某些旧 Safari 版本中对空格处理不一致 - 禁用右键菜单和拖放：
oncontextmenu="return false"、ondragstart="return false"，但不能防 JS 修改 - 服务端永远要做白名单过滤——
contenteditable的内容和textarea一样不可信
真正难的不是让内容可编辑，而是让编辑结果可控、可预测、可清理。contenteditable 没有输入类型、没有 maxlength、没有 pattern 验证，它的“自由”是双刃剑。如果你需要结构化输入（比如只允许段落+加粗），不如用 textarea + 自定义解析；如果只是临时备注或草稿，contenteditable 加一层 input 过滤就够用。
