Editor.js 使用指南：从基础操作到高级配置

Editor.js 使用指南：从基础操作到高级配置

editor.js A block-style editor with clean JSON output 项目地址: https://gitcode.com/gh_mirrors/ed/editor.js

前言

Editor.js 是一款现代化的块状编辑器（Block-Styled Editor），它通过模块化的设计理念彻底改变了传统富文本编辑器的使用体验。本文将全面介绍 Editor.js 的核心功能和使用方法，帮助开发者快速掌握这款强大的编辑器。

核心概念：块编辑器

Editor.js 采用"块（Block）"作为内容的基本组成单元，这与传统行式编辑器有本质区别：

• 每个块都是一个独立的内容单元，例如段落、标题、图片、视频、列表等
• 每种块类型都由对应的插件（Plugin）实现
• 系统提供丰富的内置插件，同时也支持自定义插件开发

这种设计带来了显著的优点：

• 内容结构更清晰
• 格式控制更精确
• 扩展性更强

基础操作指南

1. 创建内容块

Editor.js 提供了多种创建新内容块的方式：

• 回车创建：在当前块后按 Enter 键创建新块
• 工具栏创建：点击块下方的加号按钮或按 Tab 键唤出工具栏
• 快捷键创建：部分插件支持快捷键快速创建（后文详述）

2. 使用工具栏

Editor.js 的工具栏分为两种类型：

块工具栏：

• 通过 Tab 键或点击加号按钮唤出
• 显示所有可用的块类型
• 再次按 Tab 可在工具栏内循环选择
• 选中后按 Enter 确认创建

行内工具栏：

• 选中文本后自动出现
• 提供文本样式设置（加粗、斜体等）
• 支持链接插入等操作

3. 块操作菜单

每个块的左侧都有"三点"菜单按钮，提供以下功能：

• 上下移动块位置
• 删除当前块
• 块特定设置（如标题级别、列表样式等）

快捷键大全

Editor.js 提供了丰富的快捷键支持，大幅提升编辑效率：

| 功能 | 快捷键 | 使用条件 | |------|--------|----------| | 显示/切换工具栏 | Tab | 空块时可用 | | 反向切换工具栏 | Shift+Tab | 工具栏打开时 | | 确认选择 | Enter | 工具栏打开且选中工具时 | | 加粗文本 | Cmd+B (Win: Ctrl+B) | 需选中文本 | | 斜体文本 | Cmd+I (Win: Ctrl+I) | 需选中文本 | | 插入链接 | Cmd+K (Win: Ctrl+K) | 需选中文本 |

自定义插件快捷键

开发者可以为每个插件单独配置快捷键：

const editor = new EditorJS({
  tools: {
    header: {
      class: Header,
      shortcut: 'CMD+SHIFT+H'  // 自定义标题快捷键
    },
    list: {
      class: List,
      shortcut: 'CMD+SHIFT+L'  // 自定义列表快捷键
    }
  }
});

高级配置选项

1. 自动聚焦

初始化时自动聚焦到编辑器：

const editor = new EditorJS({
  autofocus: true  // 启用自动聚焦
});

2. 容器设置

支持通过ID或DOM元素指定编辑器容器：

// 方式1：使用DOM元素
const editor1 = new EditorJS({
  holder: document.querySelector('.editor-container')
});

// 方式2：使用元素ID
const editor2 = new EditorJS({
  holder: 'editor-container' 
});

3. 占位文本

自定义编辑器的空白提示文本：

const editor = new EditorJS({
  placeholder: '在这里输入您的内容...'  // 自定义占位文本
});

注意：如果使用自定义初始块，占位文本将通过配置传递给工具构造函数。

4. 日志级别控制

可配置不同级别的日志输出：

const editor = new EditorJS({
  logLevel: 'WARN'  // 只显示警告和错误
});

可选日志级别：

| 级别 | 说明 | |------|------| | VERBOSE | 显示所有消息 | | INFO | 显示信息和调试消息 | | WARN | 只显示警告和错误 | | ERROR | 只显示错误 |

最佳实践建议

1. 响应式设计：Editor.js 本身是响应式的，但建议为容器设置合适的最小高度

2. 插件选择：根据项目需求选择必要的插件，避免加载不必要的代码

3. 自定义样式：通过CSS覆盖可以轻松实现编辑器的视觉定制

4. 数据保存：合理设置保存频率，避免频繁触发保存操作

5. 移动端适配：测试在移动设备上的操作体验，必要时调整工具栏布局

结语

Editor.js 通过其创新的块状编辑模式和高度可扩展的架构，为现代Web应用提供了强大的内容编辑解决方案。掌握本文介绍的基础操作和高级配置后，开发者可以充分发挥其潜力，打造出符合项目需求的优质编辑体验。

editor.js A block-style editor with clean JSON output 项目地址: https://gitcode.com/gh_mirrors/ed/editor.js