---
title: "背景颜色扩展"
description: "使用颜色扩展为您的 Tiptap 编辑器添加文本背景颜色支持。了解更多信息，请查看我们的文档。"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/background-color"
---

# 背景颜色扩展

使用颜色扩展为您的 Tiptap 编辑器添加文本背景颜色支持。了解更多信息，请查看我们的文档。

该扩展使您能够在编辑器中设置背景颜色。它使用 [`TextStyle`](https://tiptap.zhcndoc.com/editor/extensions/marks/text-style.md) 标记，该标记渲染一个 `<span>` 标签（仅此而已）。背景颜色作为内联样式应用，例如 `<span style="background-color: #958DF1">`。

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

## 安装

```bash
npm install @tiptap/extension-text-style
```

该扩展需要 [`TextStyle`](https://tiptap.zhcndoc.com/editor/extensions/marks/text-style.md) 标记。

```ts
import { Editor } from '@tiptap/core'
import { TextStyle, BackgroundColor } from '@tiptap/extension-text-style'

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

默认情况下，该扩展与 `TextStyleKit` 扩展一起安装，因此您无需单独安装。

```ts
import { Editor } from '@tiptap/core'
import { TextStyleKit } from '@tiptap/extension-text-style'

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

## 设置

### types

应应用颜色属性的标记列表。

默认值： `['textStyle']`

```js
BackgroundColor.configure({
  types: ['textStyle'],
})
```

## 命令

### setBackgroundColor()

将给定的背景颜色作为内联样式应用。

```js
editor.commands.setBackgroundColor('#ff0000')
```

### unsetBackgroundColor()

移除任何背景颜色。

```js
editor.commands.unsetBackgroundColor()
```

## 源代码

[packages/extension-text-style/src/background-color/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-text-style/src/background-color/)

## 最小安装

```js
import { Editor } from '@tiptap/core'
import { BackgroundColor } from '@tiptap/extension-text-style/background-color'

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