大家好，我是 Front\_Yue 👋。在日常富文本编辑需求中，**Editor.js** 以其模块化、结构化输出和插件化设计逐渐成为前端开发者的热门选择。很多开发者熟悉 Editor.js 的基础用法，却对 **inlineToolbar（行内工具栏）** 的高级应用知之甚少，导致在做一些交互优化时遇到不少问题。

本篇文章将带你深入理解 inlineToolbar 的定义、配置方式以及高级使用场景，并结合实践案例分享如何自定义 inline 工具栏，甚至扩展出“顶部工具栏”来满足更复杂的编辑需求。

---

## 一、什么是 inlineToolbar？

在 **Editor.js** 中，`inlineToolbar` 指的是 **选中文字后弹出的悬浮工具栏**，常用于行内样式操作，如：加粗、斜体、链接、代码片段等。

其核心作用：

* 提供 **行内快捷操作**，不用打断用户的写作流程。
* 默认悬浮在选区上方（或下方），**定位逻辑基于容器内的 selection range**。
* 通过工具插件（如 `Bold`、`Italic`、`Link`）实现功能扩展。

### 默认效果

选中一段文字后，会在文字上方弹出悬浮工具栏，展示常用操作按钮。

---

## 二、inlineToolbar 的定义方式

### 1. 在 Block 工具中启用

当我们注册一个 Block 工具（如 Paragraph、Header）时，可以通过配置项开启行内工具栏：

```js
const editor = new EditorJS({
  holder: 'editor',
  tools: {
    paragraph: {
      class: Paragraph,
      inlineToolbar: true   // 开启 inlineToolbar
    }
  }
});
```

### 2. 指定 inline 工具项

如果只希望展示部分工具，可以传入数组：

```js
inlineToolbar: ['bold', 'italic', 'link']
```

这样，只有指定的工具会显示在行内工具栏中。

---

## 三、inlineToolbar 的高级使用

### 1. 自定义 inline 工具

除了内置工具（bold、italic、link），我们还可以编写自定义 inline 工具。

**核心方法：**

* `surround(range)`：对选区进行包裹或移除标签
* `checkState(selection)`：判断当前光标位置是否处于激活状态
* `render()`：渲染工具按钮图标

一个简单的高亮工具示例：

```js
class Highlight {
  static get isInline() {
    return true;
  }

  render() {
    const button = document.createElement('button');
    button.innerHTML = '🔆';
    return button;
  }

  surround(range) {
    if (!range) return;

    const mark = document.createElement('mark');
    range.surroundContents(mark);
  }
}
```

注册后，即可在 inlineToolbar 中看到自定义工具。

---

### 2. 自定义“顶部工具栏”

有些场景下，设计师希望像 Word 一样，编辑器顶部始终有一个固定工具栏，而不是悬浮的。

实现思路：

1. 使用 Vue/React 渲染一个自定义工具栏 UI（如按钮：加粗、斜体）。
2. 在按钮点击时，通过 Editor.js API 触发对应 inline 工具逻辑。

例如在 Vue3 中调用内置工具：

```vue
<template>
  <div class="toolbar">
    <button @click="toggleBold">B</button>
    <button @click="toggleItalic">I</button>
  </div>
  <div id="editor"></div>
</template>

<script setup>
import EditorJS from '@editorjs/editorjs';

let editor;
onMounted(() => {
  editor = new EditorJS({
    holder: 'editor',
    tools: {
      paragraph: {
        class: require('@editorjs/paragraph'),
        inlineToolbar: ['bold', 'italic']
      },
      bold: require('@editorjs/bold'),
      italic: require('@editorjs/italic')
    }
  });
});

function toggleBold() {
  editor.inlineToolbar.open();
  // TODO: 通过自定义 API 或插件实现 “加粗”
}
</script>
```

这样就能让 Editor.js 的内置能力，和我们自定义 UI 结合，扩展出一个“顶部工具栏”。

---

## 四、总结

* **inlineToolbar 是 Editor.js 的核心交互机制之一**，让编辑体验更接近主流富文本。
* 它既支持内置工具（Bold、Italic、Link），也允许自定义扩展（高亮、代码片段等）。
* 我们可以通过自定义工具栏 UI，让 Editor.js 更加贴近业务需求。

对于复杂的编辑场景（如“顶部工具栏”），我们完全可以把 Editor.js 当作“编辑内核”，再用 Vue/React 封装交互 UI，从而实现更灵活的富文本编辑器。



大家好，我是 Front_Yue 👋。在日常富文本编辑需求中，Editor.js 以其模块化、结构化输出和插件化设计逐渐成为前端开发者的热门选择。很多开发者熟悉 Editor.js 的基础用法，却对 inlineToolbar（行内工具栏） 的高级应用知之甚少，导致在做一些交互优化时遇到不少问题。

Editor.js 高级应用：inlineToolbar 的定义与进阶用法

前端开发工程师

前端

开发工具

Editor.js行内工具栏(inlineToolbar)使用指南：详解配置方法、自定义工具开发及顶部工具栏实现技巧。掌握高级应用，提升富文本编辑体验，满足复杂业务需求。

容器

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

Editor.js 高级应用：inlineToolbar 的定义与进阶用法-腾讯云开发者社区-腾讯云

Editor.js 高级应用：inlineToolbar 的定义与进阶用法

Editor.js 高级应用：inlineToolbar 的定义与进阶用法

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐