---
title: "下划线扩展"
description: "在你的文本下方添加一条线，以使其看起来更加… 下划线，使用 Tiptap 的… 下划线扩展。更多内容请查看文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/marks/underline"
---

# 下划线扩展

在你的文本下方添加一条线，以使其看起来更加… 下划线，使用 Tiptap 的… 下划线扩展。更多内容请查看文档！

使用此扩展来渲染文本 下划线。如果您在编辑器的初始内容中传入 `<u>` 标签或设置了 `text-decoration: underline` 的行内 `style` 属性的文本，它们都会相应地被渲染。

请注意，互联网上的下划线文本通常表示这是一个可点击的链接。不要用下划线文本让用户感到困惑。

> **限制:**
>
> 当读取 `Editor` 实例的内容时，扩展将生成相应的 `<u>` HTML 标签。所有标记为下划线的文本，无论采用何种方法，都会被规范化为 `<u>` HTML 标签。

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

## 安装

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

## 设置

### HTMLAttributes

应添加到渲染的 HTML 标签的自定义 HTML 属性。

```js
Underline.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

## 命令

### setUnderline()

将文本标记为下划线。

```js
editor.commands.setUnderline()
```

### toggleUnderline()

切换下划线标记。

```js
editor.commands.toggleUnderline()
```

### unsetUnderline()

移除下划线标记。

```js
editor.commands.unsetUnderline()
```

## 键盘快捷键

| 命令                | Windows/Linux | macOS   |
| ----------------- | ------------- | ------- |
| toggleUnderline() | Control + U   | Cmd + U |

## 源代码

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