---
title: "DetailsSummary 扩展"
description: "使用 DetailsSummary 扩展为你的 `` 内容启用 `` HTML 标签。详情请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/details-summary"
---

# DetailsSummary 扩展

使用 DetailsSummary 扩展为你的 `` 内容启用 `` HTML 标签。详情请查看我们的文档！

Details 扩展使你能够在编辑器中使用 `<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
DetailsSummary.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```