纯HTML的contenteditable仅提供基础可编辑能力，缺乏格式控制、光标管理、撤销机制、粘贴净化和语义化输出等富文本核心功能，必须通过输入层、格式层、输出层三层自研补足，否则仅为“能打字”的假编辑器。
纯 HTML 本身做不到真正的富文本编辑器——contenteditable 只是起点，不是终点；它提供可编辑能力，但不提供格式控制、光标操作、撤销、粘贴净化、语义化输出等关键功能。
为什么 contenteditable 不能直接当富文本编辑器用
它只是让一个元素变成“可编辑”，但行为高度不可控：
-
document.execCommand已被废弃，现代浏览器中部分命令（如insertHTML）行为不一致，formatBlock在 Firefox 中可能失效 - 粘贴时会带入大量无用
style、span、甚至 Word 的嵌套div，默认不清洗 - 回车键在不同浏览器中生成
div或p，换行逻辑混乱；Enter和Shift+Enter都难统一 - 无法可靠获取/设置光标位置（
getSelection()+RangeAPI 易出错，尤其跨浏览器） - 没有内置撤销栈，
document.execCommand('undo')不可用且不兼容
从零实现最小可行富文本编辑器的三个必要层
绕不开 DOM 操作、事件拦截和状态管理。必须自己补足这三层，否则就是“看起来能打字”的假编辑器：
-
输入层：监听
input、keydown（拦截Enter/Tab）、paste事件；对paste必须调用event.preventDefault()后用event.clipboardData.getData('text/html')拿原始 HTML，再用 DOMParser 清洗 -
格式层：不用
execCommand，改用document.queryCommandState()仅作只读检测（如判断当前是否加粗），真正插入格式用document.createElement+range.insertNode()手动包裹选区 -
输出层：导出时不能直接取
innerHTML——要递归遍历节点，把font[color]转成span[style="color:..."]，把b统一为strong，删掉空span和孤立br
哪些场景下该放弃手写，直接用成熟方案
除非你在做教学 demo 或极简内嵌备注框，否则以下情况必须引入库：
立即学习“前端免费学习笔记（深入）”；
- 需要支持表格、代码块、图片拖拽上传、@提及、Markdown 实时预览
- 要求输出标准 HTML 或 Markdown（不是“能存就行”的脏 HTML）
- 需适配移动端（iOS 上
contenteditable光标跳跃、键盘遮挡严重） - 团队里没人持续维护过
Selection+Range边界 case（比如选中跨多个p的文字后按Bold）
推荐轻量选项：Tiptap（基于 ProseMirror，API 清晰，插件机制强）、Quill（配置简单，但核心模块耦合重）、Editor.js（块级结构化，适合 CMS 场景）。
真正难的从来不是“怎么让文字变粗”，而是“用户 Ctrl+Z 三次后，光标停在哪”“粘贴一段带内联样式的表格，怎么保留结构但剥离 Word 特有 class”——这些细节不会出现在文档首页，但会卡住你三天。
