添加文本标记按钮

一个用于切换文本标记的按钮，如粗体、斜体、下划线等。

安装

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

npx @tiptap/cli add mark-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 { Underline } from '@tiptap/extension-underline'
import { Superscript } from '@tiptap/extension-superscript'
import { Subscript } from '@tiptap/extension-subscript'
import { MarkButton } from '@/components/tiptap-ui/mark-button'

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

export default function MyEditor() {
  const editor = useEditor({
    immediatelyRender: false,
    extensions: [StarterKit, Underline, Superscript, Subscript],
    content: `
        <p>
            <strong>粗体</strong> 用于强调，使用 <code>**</code> 或 <code>⌘+B</code> 或 <code>B</code> 按钮。
        </p>
        <p>
            <em>斜体</em> 用于细微差别，使用 <code>*</code> 或 <code>⌘+I</code> 或 <code>I</code> 按钮。
        </p>
        <p>
            <s>删除线</s> 用于显示修订，使用 <code>~~</code> 或 <code>~~S~~</code> 按钮。
        </p>
        <p>
            <code>代码</code> 用于代码片段，使用 <code>:</code> 或 <code>⌘+⇧+C</code> 或 <code>C</code> 按钮。
        </p>
        <p>
            <u>下划线</u> 用于强调，使用 <code>⌘+U</code> 或 <code>U</code> 按钮。
        </p>
        <p>
            <sup>上标</sup> 用于脚注，使用 <code>⌘+.</code> 或 <code>.</code> 按钮。
        </p>
        <p>
            <sub>下标</sub> 用于化学公式，使用 <code>⌘+,</code> 或 <code>,</code> 按钮。
        </p>
        `,
  })

  return (
    <EditorContext.Provider value={{ editor }}>
      <div className="tiptap-button-group" data-orientation="horizontal">
        <MarkButton type="bold" />
        <MarkButton type="italic" />
        <MarkButton type="strike" />
        <MarkButton type="code" />
        <MarkButton type="underline" />
        <MarkButton type="superscript" />
        <MarkButton type="subscript" />
      </div>

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

属性

名称	类型	默认值	描述
editor	Editor \| null	null	Tiptap 编辑器实例
type	'bold' \| 'italic' \| 'strike' \| 'code' \| 'underline' \| 'superscript' \| 'subscript'	必填	要切换的标记类型
hideWhenUnavailable	boolean	false	如果不可用，按钮是否隐藏
text	string	-	显示在图标旁边的文本

要求

使用的参考组件

use-tiptap-editor (钩子)
tiptap-utils (库)
button (原语)
bold-icon (图标)
code2-icon (图标)
italic-icon (图标)
strike-icon (图标)
subscript-icon (图标)
underline-icon (图标)
superscript-icon (图标)

开源功能

@tiptap/extension-underline
@tiptap/extension-subscript
@tiptap/extension-superscript