JavaScript富文本编辑器核心是contenteditable配合Selection/Range API或execCommand；主流方案基于可编辑区域+事件监听+DOM操作；推荐Tiptap、Quill或Slate等成熟库而非手写。
JavaScript 实现富文本编辑器的核心是利用浏览器原生的 contenteditable 属性配合 document.execCommand()（已废弃但仍有兼容性）或现代的 Selection / Range API + 自定义命令系统。目前主流方案多基于可编辑区域 + 事件监听 + DOM 操作，再封装成统一 API。
基于 contenteditable 的基础实现
只需一个带 contenteditable="true" 的容器元素，就能获得基本编辑能力：
- 设置
<div contenteditable="true" id="editor"></div> - 用
document.getElementById('editor').innerHTML读取或设置内容 - 聚焦后用户可直接输入、选中文本、使用快捷键（Ctrl+B/I/U）触发粗体/斜体/下划线
- 需监听
input、selectionchange等事件来响应格式变化
现代编辑器常用 API 功能（以 Slate、Quill、Tiptap 为例）
成熟编辑器通常提供以下几类核心 API：
-
内容管理：获取/设置 HTML 或 JSON 格式的内容（如
editor.getHTML()、editor.setContent(html)） -
选区控制：获取当前选中节点、光标位置；插入节点、替换选中内容（如
editor.insertNode(node)、editor.deleteSelection()） -
格式操作：加粗、斜体、列表、标题、链接、颜色等（如
editor.format('bold')、editor.toggleList('ordered')） - 扩展与插件：支持自定义节点（如 @提及、代码块）、自定义按钮、快捷键绑定、粘贴处理等
不依赖第三方库的手动格式控制示例
在 contenteditable 元素上执行格式命令（兼容旧版，新项目建议用 execCommand 替代方案或直接操作 DOM）：
立即学习“Java免费学习笔记（深入）”；
-
document.execCommand('bold', false, null)—— 加粗选中文本 -
document.execCommand('insertUnorderedList', false, null)—— 插入无序列表 -
document.execCommand('createLink', false, 'https://example.com')—— 创建链接 - 注意：
execCommand已被标准弃用，Chrome 97+ 默认禁用部分命令，生产环境推荐用 Selection + Range 手动包裹节点
推荐技术路线与工具选择
从零手写完整富文本编辑器成本高、兼容性差，实际项目中更推荐：
- 轻量需求：用 Tiptap（基于 ProseMirror，TypeScript 友好，插件丰富）
- 功能全面：用 Quill（API 清晰，主题和模块易扩展）
- 高度定制：用 Slate（完全数据驱动，适合复杂协作场景）
-
极简嵌入：用 medium-editor 或封装
contenteditable+ 基础 toolbar
