17370845950

JavaScript富文本编辑器核心是contenteditable配合Selection/Range API或execCommand；主流方案基于可编辑区域+事件监听+DOM操作；推荐Tiptap、Quill或Slate等成熟库而非手写。

JavaScript 实现富文本编辑器的核心是利用浏览器原生的 contenteditable 属性配合 document.execCommand()（已废弃但仍有兼容性）或现代的 Selection / Range API + 自定义命令系统。目前主流方案多基于可编辑区域 + 事件监听 + DOM 操作，再封装成统一 API。

基于 contenteditable 的基础实现

只需一个带 contenteditable="true" 的容器元素，就能获得基本编辑能力：

• 设置
• 用 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）：

• 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