添加按钮以更改文本对齐

使用这个按钮 UI 组件在 Tiptap 编辑器中更改文本对齐方式。

安装

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

npx @tiptap/cli add text-align-button

手动集成

对于除了 Vite 或 Next.js 之外的框架，请从开源库手动添加组件。

导入样式

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

用法

import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
import { StarterKit } from '@tiptap/starter-kit'
import { TextAlign } from '@tiptap/extension-text-align'
import { TextAlignButton } from '@/components/tiptap-ui/text-align-button'

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

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, TextAlign.configure({ types: ['heading', 'paragraph'] })],
    content: `
        <p>尝试选择一个段落并点击其中一个文本对齐按钮。</p>
        <p style="text-align: left">左对齐文本。</p>
        <p style="text-align: center">中间对齐文本。</p>
        <p style="text-align: right">右对齐文本。</p>
        <p style="text-align: justify">两端对齐文本。</p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <TextAlignButton align="left" />
        <TextAlignButton align="center" />
        <TextAlignButton align="right" />
        <TextAlignButton align="justify" />
      </div>

      <EditorContent editor={editor} role="presentation" />
    </EditorContext.Provider>
  )
}

属性

名称	类型	默认	描述
editor	Editor \| null	null	Tiptap 编辑器实例
align	'left' \| 'center' \| 'right' \| 'justify'	必需	要应用的文本对齐方式
hideWhenUnavailable	boolean	false	如果不可用，按钮是否应隐藏
text	string	-	显示在图标旁的文本

要求

使用的参考组件

use-tiptap-editor（钩子）
button（原语）
align-left-icon（图标）
align-right-icon（图标）
align-center-icon（图标）
align-justify-icon（图标）

开源功能

@tiptap/extension-text-align