---
title: "详细内容扩展"
description: "在您的 Tiptap 编辑器中使用 Details 和 DetailsContent 扩展来显示和隐藏内容。非常适合… 切换隐藏内容！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/details-content"
---

# 详细内容扩展

在您的 Tiptap 编辑器中使用 Details 和 DetailsContent 扩展来显示和隐藏内容。非常适合… 切换隐藏内容！

详细扩展使您能够在编辑器中使用 `<details>` HTML 标签。这非常适合显示和隐藏内容。

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

## 安装

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

## 用法

```js
import { Details, DetailsSummary, DetailsContent } from '@tiptap/extension-details'

const editor = new Editor({
  extensions: [Details, DetailsSummary, DetailsContent],
})
```

## 设置

### HTMLAttributes

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

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