在 HTML 中，contenteditable 是一个全局属性，用于指定元素的内容是否可被用户编辑。它可以让用户直接在网页上修改元素的内容，而无需借助额外的表单控件
html
<element contenteditable="true|false|inherit｜plaintext-only">
plaintext-only 属性：contenteditable="plaintext-only"
是 HTML 中 contenteditable 的一种新用法，用于创建只能编辑纯文本的可编辑区域。
"plaintext-only" 只允许编辑纯文本，不会保留或插入任何 HTML 标签。
| 属性值 | 描述 | 示例输入效果 |
|---|---|---|
contenteditable="true" |
富文本可编辑（支持加粗、粘贴带格式的文本） | 粘贴带样式文字，会保留格式 |
contenteditable="plaintext-only" |
仅纯文本可编辑（自动去除格式） | 粘贴时去掉所有样式、标签，只保留文字 |
contenteditable="false" |
不可编辑 | 无法输入 |
使用场景
- 富文本编辑：常用于创建简单的在线文本编辑器，例如博客评论框或笔记应用。
- 动态内容修改：允许用户直接在页面上修改显示的文本，如编辑用户名或标题。
- 交互式网页：增强用户交互体验，例如在表格中直接编辑数据。
工作原理
- 当元素被设置为 contenteditable="true" 时，用户可以通过点击元素并输入文字、删除内容或粘贴内容来修改它。
- 浏览器会将用户的编辑操作直接反映到 DOM 中，但不会自动保存到服务器（需要通过 JavaScript 捕获并处理）。
- 可编辑区域支持基本的文本格式化（例如加粗、斜体），具体取决于浏览器和 CSS 样式。
浏览器兼容性：contenteditable 在所有主流浏览器（如 Chrome、Firefox、Safari、Edge）中均受支持。
安全性：
- 用户输入的内容可能包含恶意代码（如
默认行为：
- 浏览器可能为可编辑区域提供基本的上下文菜单（例如复制、粘贴）。
- 回车键通常会插入 <div 或 p> 标签，具体行为因浏览器而异。
限制：
- 某些元素（如 、）本身已有编辑功能，通常不需要 contenteditable。
- 复杂编辑功能（如插入图片、表格）可能需要结合 JavaScript 库（如 Quill 或 CKEditor）。
See the Pen html`contenteditable` by liu874396180 ( @liu874396180) on CodePen.