将段落节点添加到您的编辑器

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

安装

您可以通过 Tiptap CLI（适用于 Vite 或 Next.js）添加该节点组件：

npx @tiptap/cli add paragraph-node

手动集成

对于除 Vite 或 Next.js 以外的框架，可从开源仓库手动添加该节点组件。

导入样式

此组件需要您导入我们的样式，这些样式已添加到 styles/keyframe-animation.scss 和 styles/_variables.scss。

用法

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

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} className="control-showcase" />
}

特性

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

要求

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

开源功能