直接添加contenteditable="true"即可使任意元素变为可编辑区域，但需显式设值、配合tabindex="0"确保聚焦，内容读取用textcontent或innerhtml，监听用input事件，粘贴需过滤以保障安全。
直接给任意元素添加 contentEditable="true" 属性，它就变成可编辑区域了——不需要 JavaScript 也能生效，但 JS 可以帮你控制行为、获取内容、处理格式或限制输入。
让元素变成可编辑区域
最基础的方式就是设置属性：
- HTML 中写：
<div contenteditable="true">点我编辑</div> - JS 中动态设置：
element.contentEditable = "true";（注意是字符串"true"，不是布尔值true） - 可选值有：
"true"（完全可编辑）、"false"（不可编辑）、"plaintext-only"（仅纯文本，禁用富文本格式）
获取和设置编辑内容
contentEditable 元素的内容本质是 HTML 片段，所以推荐用以下方式操作：
- 读取内容（含 HTML 标签）：
element.innerHTML - 读取纯文本：
element.textContent或element.innerText（后者会触发重排，慎用） - 清空内容：
element.innerHTML = "" - 插入带格式内容：
element.innerHTML = "<strong>加粗</strong>文字";
监听编辑变化
它不触发 input 事件（像 <input> 那样），但可用这些事件捕获修改：
-
input：现代浏览器基本支持，最常用（兼容性 OK，Chrome/Firefox/Edge ≥ 57） -
blur：失去焦点时，适合做最终保存 -
keydown/keyup：用于拦截快捷键（如 Ctrl+B 加粗）、限制字符等 - 注意：
change事件对contentEditable无效
常见控制技巧
仅开启编辑还不够，实际中常需约束行为：
- 禁用默认右键菜单：
element.addEventListener("contextmenu", e => e.preventDefault()); - 阻止拖放插入图片/文件：
element.addEventListener("drop", e => e.preventDefault()); - 限制只允许纯文本（类似 textarea）：
element.contentEditable = "plaintext-only"; - 聚焦到编辑区：
element.focus();（首次点击可能需手动触发） - 防止聚焦后出现浏览器默认边框（可选）：
element.style.outline = "none";
不复杂但容易忽略：contentEditable 是原生能力，JS 的作用是增强体验、保障数据、统一交互逻辑——别把它当成富文本编辑器的替代品，真要复杂排版，还是该用 execCommand（已废弃）或现代方案如 ProseMirror、Tiptap。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
