contenteditable元素需用innerHTML或textContent读取内容，不可用value；获取纯文本应标准化换行与空白；监听编辑需组合input/paste/drop/keydown或MutationObserver；判空需清理HTML及特殊空格字符。
直接读 innerHTML 或 textContent 是最常用也最容易出错的方式——它不区分用户输入与 DOM 插入内容，也不处理光标位置、富文本残留或空格折叠问题。
contenteditable 元素的 value 不等于 input 的 value
contenteditable 元素没有 value 属性，试图用 el.value 会返回 undefined。必须通过 DOM 属性读取内容，但选哪个取决于你要什么：
-
innerHTML：保留所有 HTML 标签（如、 -
textContent：纯文本，自动合并空白、忽略标签结构，但会丢失换行（间无空行） -
innerText：受 CSS 影响（如display: none元素不计入），行为在不同浏览器中不一致，不推荐用于数据采集
如何安全提取用户可见文本（类 textarea 行为）
若目标是模拟 的纯文本提交逻辑（比如表单校验、后端存 plain text），需手动标准化换行和空白：
function getPlainText(el) {
const html = el.innerHTML;
// 替换
为换行符， 块前后加换行，移除其他标签
return html
.replace(/]*>/gi, '\n')
.replace(/]*>/gi, '\n')
.replace(/<\/p>/gi, '\n')
.replace(/<[^>]+>/g, '') // 移除剩余所有标签
.replace(/\n\s*\n/g, '\n\n') // 合并连续空行
.trim();
}
注意：getPlainText 不处理 、零宽空格、Unicode 换行符（如 \u2028），生产环境建议配合 normalize('NFC') 和正则清理。
立即学习“前端免费学习笔记（深入）”；
监听编辑变化不能只靠 input 事件
contenteditable 元素上 input 事件兼容性差（Safari 旧版、IE 完全不触发），且无法捕获剪贴板粘贴、拖放、格式刷等操作引发的内容变更：
- 必须同时监听
input、paste、drop、keydown（针对Delete/Backspace） - 更稳妥的做法是使用
MutationObserver监听子节点或innerHTML变化（但开销略高） - 避免在
paste事件中直接读innerHTML—— 此时粘贴尚未完成，应setTimeout(..., 0)延迟读取
空内容判断比想象中麻烦
用户删光所有文字后，innerHTML 可能是 "、
"""、" " 或带空白字符的空串。仅用 !el.textContent.trim() 仍可能漏判：
function isEmptyEditable(el) {
const html = el.innerHTML.trim();
if (!html) return true;
// 移除所有标签后只剩空格、 、零宽字符等
const text = html
.replace(/<[^>]+>/g, '')
.replace(/ | /gi, ' ')
.replace(/[\u2000-\u200F\u2028\u2029\u202F\u2060\ufeff]/g, '');
return !text.trim();
}
这个函数仍不能覆盖所有 CMS 或编辑器注入的隐藏占位符，真实项目中建议在初始化时记录“空态基准 HTML”，后续比对更可靠。
