---
title: "焦点扩展"
description: "在 Tiptap 中使用焦点扩展跟踪并突出显示光标的位置。阅读我们的文档了解更多信息！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/focus"
---

# 焦点扩展

在 Tiptap 中使用焦点扩展跟踪并突出显示光标的位置。阅读我们的文档了解更多信息！

焦点扩展为聚焦节点添加一个 CSS 类。默认情况下，它添加 `.has-focus`，但你可以更改它。

请注意，这只是一个类，样式完全可以由你决定。下面的用法示例包含了该类的一些 CSS。

> **Interactive demo:** [Focus](https://embed.tiptap.dev/preview/Extensions/Focus)

## 安装

```bash
npm install @tiptap/extensions
```

并在你的编辑器中导入：

```ts
import { Editor } from '@tiptap/core'
import { Focus } from '@tiptap/extensions'

new Editor({
  extensions: [Focus],
})
```

## 设置

### className

应用于聚焦元素的类。

默认值：`'has-focus'`

```js
Focus.configure({
  className: 'focus',
})
```

### mode

将类应用于 `'all'`、`'shallowest'` 或 `'deepest'` 节点。

默认值：`'all'`

```js
Focus.configure({
  mode: 'deepest',
})
```

## 源代码

[packages/extensions/focus/](https://github.com/ueberdosis/tiptap/blob/main/packages/extensions/src/focus/)