最简启用方式是contenteditable="true"，但推荐js动态控制以避免聚焦异常、seo污染和权限问题；需手动监听input/blur取内容，禁用时加tabindex="-1"和user-select:none；光标定位须用range/selection；css需重置outline、user-select及占位符；数据落地优先用textcontent或白名单过滤html。
contenteditable="true" 是最简启用方式，但别直接写死在 HTML 里
直接给元素加 contenteditable="true" 确实能让它变可编辑，比如 <div contenteditable="true">点我编辑</div>。但实际项目中更推荐用 JS 动态控制——避免意外聚焦、防止 SEO 抓取脏内容、也方便配合权限逻辑。
常见错误是把 contenteditable 当成表单控件：它不触发 change 事件，value 属性不存在，也不能用 form.submit() 自动收集。得监听 input 或 blur 手动取 innerHTML 或 textContent。
- 只读场景用
contenteditable="false"，禁用状态建议同时加tabindex="-1"和style="user-select: none;"防止误选 - 想限制纯文本（禁用格式粘贴），需监听
paste事件并调用event.preventDefault()，再用document.execCommand('insertText', false, event.clipboardData.getData('text/plain'))（注意：该 API 已废弃，现代方案需用getSelection()+Range插入） - 移动端 Safari 对
contenteditable的光标定位和键盘唤起不稳定，建议加role="textbox"提升可访问性兼容
focus() 和 selection 不如你想象中可靠
JS 调用 element.focus() 后，光标不一定落在末尾，尤其元素初始为空或含嵌套标签时。必须手动创建 Range 和 Selection 控制光标位置。
典型场景：点击按钮激活编辑，光标要落到文字末尾。不能只靠 focus()：
const el = document.getElementById('editor');
el.focus();
const range = document.createRange();
const selection = window.getSelection();
range.selectNodeContents(el);
range.collapse(false); // 光标移到末尾
selection.removeAllRanges();
selection.addRange(range);
- 如果元素内有
<br>或空<p></p>，selectNodeContents可能选中不可见节点，导致光标卡住；稳妥做法是先清空富文本结构，用纯文本初始化 - SSR 渲染的页面首次
focus()可能失败（DOM 未就绪），需包裹在requestAnimationFrame或setTimeout中 - Chrome 120+ 对
document.execCommand的支持进一步收紧，涉及加粗/列表等操作，优先考虑execCommand替代方案（如操作innerHTML字符串）或改用InputEvent模拟
样式与交互必须重置，否则用户会懵
浏览器默认会给 contenteditable 元素加 outline、光标样式、选中文本高亮色，和你的 UI 完全不搭。这些不是“可选优化”，而是影响可用性的硬需求。
关键 CSS 必须写：
[contenteditable] {
outline: none;
user-select: text;
}
[contenteditable]:empty::before {
content: attr(data-placeholder);
color: #999;
}
[contenteditable]:focus::before {
content: none;
}
-
user-select: text是为了允许双击选词，不加的话移动端长按无法触发选择菜单 - 占位符用
::before而非placeholder属性，因为原生属性对contenteditable无效 - 禁止用
white-space: pre-wrap处理换行——它会让空格和缩进全部保留，用户回车后可能多出意外空行；正确做法是让编辑器自己处理<br>或<p></p>标签
数据落地别碰 innerHTML，优先用 textContent 或自定义序列化
直接存 element.innerHTML 是最危险的操作：XSS 漏洞、跨浏览器标签差异（Chrome 用 <div> 换行，Firefox 用 <code><br>）、还有各种不可见字符（ 零宽空格等）。
安全落地策略取决于你的需求：
- 纯文本场景：一律用
element.textContent，它自动剥离所有标签，且兼容性完美 - 需保留简单格式（加粗、换行）：遍历子节点，用白名单过滤
nodeName（只留"B","I","BR"），再拼 HTML 字符串 - 复杂排版（列表、图片、嵌套块）：别自己解析 HTML，引入轻量解析器如
html-to-text或dompurify做清洗，再存为结构化 JSON（如{ type: 'paragraph', children: [...] }）
真正难的不是让元素可编辑，而是让用户编辑完的内容，既安全、又可控、还能在不同设备上保持一致表现。每次复制粘贴、每次回车、每次切换输入法，都在考验你对 DOM 选区和浏览器行为的理解深度。
