HTML contenteditable 可编辑内容

contenteditable属性（富文本编辑器基础）：contenteditable=true/false/plaintext-only、execCommand已弃用、现代富文本编辑器方案（Quill/TipTap/ProseMirror/Slate.js/Lexical） · 难度：入门 · +10XP

HTML contenteditable —— 让任何元素可编辑

给一个div加上contenteditable="true"，用户就能像编辑Word文档一样直接在网页上修改内容。

基本用法

<div contenteditable="true">
  这段文字你可以直接点击修改...
</div>

重要属性值

<div contenteditable="true">  可编辑</div>
<div contenteditable="false"> 禁止编辑</div>
<div contenteditable="plaintext-only"> 纯文本模式</div>

动手练习

1. 基础练习：做一个可编辑的备忘录——大的contenteditable div，用户直接打字，内容自动保存到localStorage。
2. 进阶应用：做一个简单的富文本工具栏——加粗、斜体、下划线三个按钮，用document.execCommand控制选中文字格式。
3. 项目实战：了解contenteditable后，研究Quill.js或TipTap等成熟的富文本编辑器，理解它们为什么在contenteditable基础上做了大量封装。