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”，后续比对更可靠。