contenteditable元素不支持placeholder属性，因其仅对input和textarea生效；需用:empty::before伪元素或JS遮罩层模拟提示效果。
contenteditable 元素没有 placeholder 属性
直接给 div contenteditable="true" 加 placeholder 属性完全无效——浏览器根本不识别，也不会渲染任何提示文字。这不是兼容性问题，而是 HTML 规范明确限定：该属性只对 <input> 和 <textarea> 生效。
常见错误现象：<div contenteditable="true" placeholder="请输入内容"></div> 在 DevTools 里能看到这个属性，但页面上什么也不显示。
- 别试图用 JS 动态设置
element.placeholder = "xxx"，它不会触发任何 DOM 变化 - 别指望 polyfill 库（如 old placeholder.js）能自动适配 contenteditable —— 它们只处理表单控件
- 若用 Vue/React 封装了富文本组件，确保
placeholderprop 最终透传给了内部的原生<input>或<textarea>，而不是挂在 contenteditable 容器上
::before + :empty 是最轻量的 CSS 模拟方案
利用 :empty 伪类检测内容为空、::before 插入提示文字，是目前最通用且无需 JS 的方式。它不依赖 JS 状态同步，也避开事件监听的边界 case（比如粘贴后未触发 input 事件）。
关键限制：仅当元素内连空白符都没有时才生效。所以必须确保初始化时 DOM 是真正空的，不能有 、换行或零宽空格。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
.editor:empty::before { content: "请输入内容"; color: #999; } - 聚焦时隐藏：
.editor:focus::before { content: none; } - 必须加
white-space: pre-line才能保留换行（如果提示文案含 \n） - IE11 不支持
:empty伪类，需降级：用 JS 监听input事件判断innerText.trim() === ""后切换 class
遮罩层方案更可控但需 JS 同步状态
当需要精确控制位置、字体继承、或支持富文本格式（如加粗关键词）时，CSS 伪元素就不够用了。此时应采用绝对定位的遮罩 <div>，与 contenteditable 元素同级并包裹在 position: relative 容器中。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
容易踩的坑是显隐逻辑不同步：用户粘贴内容、用快捷键撤销、甚至光标移入但未输入，都可能导致遮罩残留或误消失。
- 监听
input和focus事件，用el.innerText.trim() === ""判断是否显示遮罩 - 遮罩层必须设
aria-hidden="true"，否则屏幕阅读器会重复读取 placeholder 文本 - 若编辑器支持 resize 或滚动，需在
resize、scroll时重新计算遮罩层top/left - 不要用
contenteditable内部的<span>模拟占位 —— 它会干扰选区、光标定位和序列化逻辑
为什么不能用 ::placeholder 伪元素
::placeholder 只作用于原生表单控件，对 contenteditable 元素完全无意义。尝试写 div[contenteditable]::placeholder 或 div::placeholder，CSS 规则会被浏览器静默丢弃，DevTools 里都看不到匹配。
有人试过用 WebKit 前缀伪造：div::-webkit-input-placeholder，结果是：Chrome 不认，Firefox 报错，Safari 忽略 —— 这不是跨浏览器差异，是语法根本无效。
真正要统一控制样式，只能走两条路：一是用 ::before 配 CSS（颜色、字号、行高可调），二是遮罩层（所有样式自由，但成本更高）。没有第三条捷径。
复杂点在于：富文本编辑器里，“空”的定义本身就有歧义——是 DOM 结构为空？还是语义上无有效内容？比如一个只有 <br> 或零宽空格的编辑区，视觉上是空的，但 :empty 不匹配。这种 case 必须靠 JS 判断，无法纯 CSS 解决。
