Tiptap 中文文档

水平分隔线节点

一个用于在编辑器中显示格式化水平分隔线的样式化水平分隔线节点。

安装

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

npx @tiptap/cli@latest add horizontal-rule-node

使用

HorizontalRuleNode 主要是一个样式组件，用于增强编辑器中水平分隔线的外观。使用时，只需将其包含在您的项目中，并确保您在使用 Tiptap 的 HorizontalRule 扩展。

import { useEditor, EditorContent } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import HorizontalRule from '@/components/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension'

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

export default function EditorWithHorizontalRule() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit.configure({ horizontalRule: false }), HorizontalRule],
    content: `
      <p>这是水平分隔线前的一段文字。</p>
      <hr />
      <p>这是水平分隔线后的一段文字。</p>
    `,
  })

  return <EditorContent editor={editor} />
}

特性

  • 水平分隔线的语法高亮样式
  • 暗黑模式支持
  • 合理的间距和外边距
  • 使用等宽字体提升可读性
Previously标题节点