---
title: "段落节点"
description: "Add a paragraph node UI component to your Tiptap editor. More in the documentation!"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/node-components/paragraph-node"
---

# 段落节点

Add a paragraph node UI component to your Tiptap editor. More in the documentation!

对 Tiptap 编辑器中的核心段落节点和各种其他文本元素进行全面的样式设置。

> **Interactive demo:** [paragraph node](https://template.tiptap.dev/preview/tiptap-node/paragraph-node)

## 安装

你可以通过 Tiptap CLI 添加节点组件

```bash
npx @tiptap/cli@latest add paragraph-node
```

## 用法

段落节点为编辑器中的段落和其他相关文本元素提供样式。要使用它，请将其与 Tiptap 编辑器一起包含在您的项目中。

```tsx
import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/paragraph-node/paragraph-node.scss'

export default function BasicEditor() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `
      <h1>标题 1</h1>
      <h2>标题 2</h2>
      <p>一个包含 <a href="#">链接</a> 和 <strong>粗体文本</strong> 的段落。</p>
      <blockquote>一段带有洞察力文本的引用。</blockquote>
      <hr/>
      <p>在水平规则后面的另一个段落。</p>
    `,
  })

  return <EditorContent editor={editor} />
}
```

## 特性

- 为段落提供核心样式，具有适当的间距
- 带有适当大小的标题样式 (h1-h4)
- 带有左边框的引用样式
- 具有适当颜色的链接样式
- 水平规则 (hr) 样式
- 嵌套 span 的文本装饰继承
- 选择高亮
- 适当的光标样式
- 空段落占位符
- 线程标记样式集成
- 高亮颜色变量
- 数学组件集成
- 支持深色模式
- 间隙光标样式

## 要求

`paragraph-node.scss` 为许多核心 Tiptap 功能提供样式。虽然它没有直接的依赖关系，但与以下功能配合使用效果最佳：

开源功能

- [`@tiptap/starter-kit`](https://tiptap.zhcndoc.com/editor/extensions/functionality/starterkit.md)
- [`@tiptap/extension-link`](https://tiptap.zhcndoc.com/editor/extensions/marks/link.md)
- [`@tiptap/extension-highlight`](https://tiptap.zhcndoc.com/editor/extensions/marks/highlight.md)
- [`@tiptap/extension-mathematics`](https://tiptap.zhcndoc.com/editor/extensions/functionality/mathematics.md)（可选）