---
title: "TextStyleKit 扩展"
description: "所有必要的文本样式扩展在一个扩展中，与 TextStyleKit 一起。非常适合快速注册 Tiptap 中最常见的文本样式。更多内容见文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/text-style-kit"
---

# TextStyleKit 扩展

所有必要的文本样式扩展在一个扩展中，与 TextStyleKit 一起。非常适合快速注册 Tiptap 中最常见的文本样式。更多内容见文档！

`TextStyleKit` 是一组最常见的 Tiptap 文本样式扩展。如果你想快速在 Tiptap 中设置文本样式，这个扩展适合你。

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

## 安装

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

## 包含的扩展

### Marks

- [`TextStyle`](https://tiptap.zhcndoc.com/editor/extensions/marks/text-style.md)

### 功能

- [`BackgroundColor`](https://tiptap.zhcndoc.com/editor/extensions/functionality/background-color.md)
- [`Color`](https://tiptap.zhcndoc.com/editor/extensions/functionality/color.md)
- [`FontFamily`](https://tiptap.zhcndoc.com/editor/extensions/functionality/fontfamily.md)
- [`FontSize`](https://tiptap.zhcndoc.com/editor/extensions/functionality/fontsize.md)
- [`LineHeight`](https://tiptap.zhcndoc.com/editor/extensions/functionality/line-height.md)

## 源代码

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

## 使用 TextStyleKit 扩展

将 `TextStyleKit` 传递给编辑器，以一次加载所有包含的扩展。

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

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

你可以配置包含的扩展，甚至禁用其中一些，如下所示。

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

const editor = new Editor({
  extensions: [
    TextStyleKit.configure({
      // 禁用某个扩展
      backgroundColor: false,

      // 配置某个扩展
      fontSize: {
        types: ['heading', 'paragraph'],
      },
    }),
  ],
})
```