---
title: "排版扩展"
description: "使用排版扩展在您的编辑器中将常见的文本模式替换为排版字符。更多信息请查阅文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/typography"
---

# 排版扩展

使用排版扩展在您的编辑器中将常见的文本模式替换为排版字符。更多信息请查阅文档！

该扩展旨在用正确的排版字符帮助处理常见的文本模式。所有规则的底层实现都是输入规则。

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

## 安装

```bash
npm install @tiptap/extension-typography
```

## 规则

| 名称                  | 描述                          |
| ------------------- | --------------------------- |
| emDash              | 将双破折号 `--` 转换为长破折号 `—`。     |
| ellipsis            | 将三个点 `...` 转换为省略号字符 `…`。    |
| openDoubleQuote     | 开始双引号 `“`。                  |
| closeDoubleQuote    | 结束双引号 `”`。                  |
| openSingleQuote     | 开始单引号 `‘`。                  |
| closeSingleQuote    | 结束单引号 `’`。                  |
| leftArrow           | 将 `<-` 转换为箭头 `←`。           |
| rightArrow          | 将 `->` 转换为箭头 `→`。           |
| copyright           | 将 `(c)` 转换为版权符号 `©`。        |
| registeredTrademark | 将 `(r)` 转换为注册商标符号 `®`。      |
| trademark           | 将 `(tm)` 转换为商标符号 `™`。       |
| servicemark         | 将 `(sm)` 转换为服务商标符号 `℠`。     |
| oneHalf             | 将 `1/2` 转换为分数 `½`。          |
| oneQuarter          | 将 `1/4` 转换为分数 `¼`。          |
| threeQuarters       | 将 `3/4` 转换为分数 `¾`。          |
| plusMinus           | 将 `+/-` 转换为正负符号 `±`。        |
| notEqual            | 将 `!=` 转换为不等号 `≠`。          |
| laquo               | 将 `<<` 转换为左双角引号 `«`。        |
| raquo               | 将 `>>` 转换为右双角引号 `»`。        |
| multiplication      | 将 `2*3` 或 `2x3` 转换为乘法号 `×`。 |
| superscriptTwo      | 将 `^2` 转换为上标二 `²`。          |
| superscriptThree    | 将 `^3` 转换为上标三 `³`。          |

## 快捷键

| 命令              | Windows/Linux | macOS  |
| --------------- | ------------- | ------ |
| undoInputRule() | Backspace     | Delete |

## 源码

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

### 禁用规则

您可以配置内置的规则，甚至禁用部分规则，如下所示。

```js
import { Editor } from '@tiptap/core'
import Typography from '@tiptap/extension-typography'

const editor = new Editor({
  extensions: [
    // 禁用部分内置规则
    Typography.configure({
      oneHalf: false,
      oneQuarter: false,
      threeQuarters: false,
    }),
  ],
})
```

### 重写规则

您可以通过传递字符串覆盖规则的输出内容。

```js
import { Editor } from '@tiptap/core'
import Typography from '@tiptap/extension-typography'

const editor = new Editor({
  extensions: [
    // 重写部分规则输出
    Typography.configure({
      oneHalf: '1 / 2', // 这将插入“1 / 2”而不是默认的“½”
    }),
  ],
})
```

### RTL 智能引号

`openDoubleQuote`、`closeDoubleQuote`、`openSingleQuote` 和 `closeSingleQuote` 规则通过 `doubleQuotes` 和 `singleQuotes` 选项支持感知 RTL 的引号字符。

显式的 `rtl` 配置优先于 `textDirection`。如果未提供显式配置，则扩展会回退到 `editor.options.textDirection === 'rtl'`。否则，将使用默认的 LTR 引号。

> **注意：** 为了避免混合方向文本中的歧义，刻意不使用基于内容的自动方向检测。

```js
import { Editor } from '@tiptap/core'
import Typography from '@tiptap/extension-typography'

const editor = new Editor({
  extensions: [
    Typography.configure({
      doubleQuotes: { rtl: { open: '”', close: '“' } },
      singleQuotes: { rtl: { open: '’', close: '‘' } },
    }),
  ],
})
```