标准答案
- contenteditable 让元素内容可以被用户直接编辑，适合非常轻量的内联编辑。
- 复杂场景会遇到粘贴污染、XSS、光标丢失、输入法组合、撤销栈和浏览器差异。
- 用户粘贴的 HTML 必须清洗，不能直接保存或渲染。
- 富文本编辑通常需要独立文档模型，把用户操作映射成受控的数据结构。
- 实际项目常用 ProseMirror、TipTap、Slate、Lexical 等编辑器框架，而不是裸用 contenteditable。
题目解析
这题要体现风险意识。contenteditable 看起来简单，但真正难的是输入行为和数据模型。
富文本不是“一个可编辑 div”，而是一套编辑、序列化、清洗、协作和回显体系。
代码示例
轻量编辑可以用 contenteditable，但保存前必须处理输入内容。
HTML
<div contenteditable="true" aria-label="备注">
可以编辑这段备注
</div>常见误区
- 直接保存 innerHTML，导致 XSS 和脏样式进入系统。
- 忽略输入法组合事件，中文输入时状态更新异常。
- 用简单 div 试图实现复杂富文本，后续撤销、选区和协作都难维护。