---
title: "颜色扩展"
description: "通过颜色扩展为您的 Tiptap 编辑器添加文本颜色支持。详细信息请参阅我们的文档。"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/color"
---

# 颜色扩展

通过颜色扩展为您的 Tiptap 编辑器添加文本颜色支持。详细信息请参阅我们的文档。

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

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

## 安装

```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, Color } from '@tiptap/extension-text-style'

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

此扩展默认与 `TextStyleKit` 扩展一起安装，因此您不需要单独安装它。

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

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

## 设置

### types

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

默认: `['textStyle']`

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

## 命令

### setColor()

将给定字体颜色应用为行内样式。

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

### unsetColor()

移除任何字体颜色。

```js
editor.commands.unsetColor()
```

## 源代码

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

## 最小安装

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

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