contenteditable 交互式教程 - 百灵AI
由蚂蚁集团百灵AI提供技术支持 | contenteditable 虽然强大，但生产环境建议使用专业库（如 Quill、Tiptap）处理复杂富文本
🧠 contenteditable 深度交互教程
每个示例均可直接编辑，右侧实时显示 HTML 输出。点击按钮体验高级功能！
基础 可编辑段落 & 实时输出
原理： 添加
特点： - 支持富文本（粘贴带格式文本、Ctrl+B 加粗等）
- 输入时自动更新 innerHTML
- 占位符通过 CSS :empty 伪类实现
contenteditable="true" 属性使任何元素可编辑。特点： - 支持富文本（粘贴带格式文本、Ctrl+B 加粗等）
- 输入时自动更新 innerHTML
- 占位符通过 CSS :empty 伪类实现
这是可编辑段落。试试：选中文字后按 Ctrl+B 加粗，或粘贴带格式的文本。
// 编辑内容将实时显示在这里...
工具栏带格式的编辑器
原理： 使用
注意： execCommand 在现代项目中建议用库替代（如 Tiptap），但此例用于教学
document.execCommand()（虽然已废弃但广泛兼容）或现代 Selection API注意： execCommand 在现代项目中建议用库替代（如 Tiptap），但此例用于教学
选中这段文字，然后点击工具栏按钮试试效果！
// 格式化后的HTML将显示在这里
UX智能占位符 & 输入检测
技术： - CSS
- JS 监听
:empty:not(:focus):before 实现无 JS 占位符- JS 监听
input 事件实现动态提示字符数: 0
数据表格单元格编辑
应用场景： 在线 Excel、数据看板、后台管理系统
实现： 为每个
实现： 为每个
td 添加 contenteditable，监听变化保存数据| 产品 | 价格 | 库存 |
|---|---|---|
| iPhone 15 | ¥7999 | 100 |
| MacBook Pro | ¥12999 | 45 |
// 点击保存查看 JSON 数据
高级多用户编辑模拟（带光标显示）
模拟原理： - 通过
input 事件广播变更- 使用不同颜色边框区分用户- 实际项目需配合 WebSocket + Operational Transformation你的编辑区（蓝色边框）
开始输入，右侧将实时同步显示
其他用户看到的内容（绿色边框）
等待你的输入...
安全防止 XSS 攻击的内容清洗
风险： 用户可能粘贴
解决方案： 提交前用
<script>alert('XSS')</script>解决方案： 提交前用
textContent 或 DOMPurify 清洗 HTML尝试粘贴：
<script>alert('XSS!')</script> 或 <img src=x onerror=alert(1)>// 安全输出将显示在这里