contenteditable是HTML5属性，使元素可编辑，通过设置true/false/inherit控制编辑状态，结合JavaScript可实现内容修改、保存等功能，适用于简易富文本编辑场景。
HTML5 提供了原生的内容可编辑功能，通过 contenteditable 属性即可让任意元素变成可编辑状态，无需额外的编辑器插件。这个特性结合简单的 JavaScript 可实现轻量级的富文本编辑功能。
什么是 contenteditable 属性？
contenteditable 是 HTML5 中的一个全局属性，可以添加到任何 HTML 元素上，使该元素及其子元素变为可编辑状态。浏览器会自动启用文本输入行为，用户可以直接在页面上修改内容。
它有三个可选值：
- true 或空值（如 contenteditable）：开启编辑功能
- false：关闭编辑功能
- inherit：继承父元素的编辑状态
示例：
立即学习“前端免费学习笔记（深入）”；
<div contenteditable="true">这个区域可以编辑！
</div>
如何用 contenteditable 实现页面编辑
只需要给需要编辑的元素加上 contenteditable="true"，用户就可以直接点击并修改内容。结合 CSS 和 JavaScript，还能实现格式化、保存、撤销等操作。
基本步骤如下：
- 选择一个容器元素（如 div、p、section）
- 设置 contenteditable="true"
- 使用 CSS 控制外观（比如边框、光标样式）
- 通过 JavaScript 操作内容（获取、保存、清空等）
完整示例：
<div id="editor" contenteditable="true" style="border:1px solid #ccc; min-height:100px; padding:10px;">
点击这里开始编辑内容...
</div>
<button onclick="saveContent()">保存内容</button>
<button onclick="clearContent()">清空</button>
<script>
function saveContent() {
const content = document.getElementById('editor').innerHTML;
localStorage.setItem('savedContent', content);
alert('内容已保存');
}
function clearContent() {
document.getElementById('editor').innerHTML = '';
}
</script>
常见用途与注意事项
contenteditable 常用于以下场景：
- 简易 CMS 后台内容编辑
- 笔记类应用的富文本输入
- 邮件或文档模板的在线修改
- 所见即所得（WYSIWYG）编辑器的基础
需要注意的问题：
- 不同浏览器对格式的支持略有差异
- 用户可能粘贴带样式的 HTML，造成混乱
- 需防范 XSS 攻击，保存前应过滤危险标签
- 撤销/重做依赖浏览器默认行为（可用 document.execCommand 配合，但已废弃）
增强编辑功能（基础命令控制）
虽然 document.execCommand 已被标记为废弃，但在现代浏览器中仍广泛支持，可用于粗体、对齐、插入列表等简单操作。
示例：添加加粗、斜体按钮
<button onclick="document.execCommand('bold')">加粗</button><button onclick="document.execCommand('italic')">斜体</button>
<button onclick="document.execCommand('insertUnorderedList')">项目符号</button>
这些命令作用于当前聚焦的 contenteditable 元素，适合快速实现基础格式化。
基本上就这些。contenteditable 是实现页面内编辑最简单直接的方式，适合轻量需求。复杂场景建议使用专业编辑器如 TinyMCE、Quill 或 Slate.js。
