tiptap

Tiptap是ProseMirror的一个无头封装，ProseMirror是一个用于构建富文本所见即所得编辑器的工具包https://tiptap.dev/docs/editor/getting-started/overview

我们的博客系统已经拥有了读取md文件的能力, 但是md文件需要额外的编辑器来编辑, 并且需要额外的目录来存放md文件,
所以我们改为使用数据库+tiptap富文本的方式来存储我们的博客

git仓库

本章是nextjs入门课程系列的一部分, 查看以下git仓库, 并切换到extra2分支, 可查看本章代码

course-repositoryhttps://github.com/malred/hexo-blog-nextjs-course

安装配置tiptap

因为需要的依赖比较多, 所以我们用修改package.json然后install的方式来安装新的依赖

{
  "dependencies": {
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-label": "^2.1.0",
    "@radix-ui/react-select": "^2.1.1",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-toggle": "^1.1.0",
    "@tailwindcss/typography": "^0.5.14",
    "@tiptap/core": "^2.4.0",
    "@tiptap/extension-character-count": "^2.4.0",
    "@tiptap/extension-color": "^2.4.0",
    "@tiptap/extension-document": "^2.4.0",
    "@tiptap/extension-dropcursor": "^2.4.0",
    "@tiptap/extension-focus": "^2.4.0",
    "@tiptap/extension-heading": "^2.4.0",
    "@tiptap/extension-image": "^2.4.0",
    "@tiptap/extension-paragraph": "^2.4.0",
    "@tiptap/extension-subscript": "^2.4.0",
    "@tiptap/extension-superscript": "^2.4.0",
    "@tiptap/extension-text": "^2.4.0",
    "@tiptap/extension-text-align": "^2.4.0",
    "@tiptap/extension-text-style": "^2.4.0",
    "@tiptap/pm": "^2.4.0",
    "@tiptap/react": "^2.4.0",
    "@tiptap/starter-kit": "^2.4.0",
    "@tiptap/suggestion": "^2.4.0",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "@tiptap/extension-font-family": "^3.0.0",
    "@tiptap/extension-highlight": "^2.6.6",
    "@tiptap/extension-link": "^3.0.0",
    "@tiptap/extension-list-keymap": "^3.0.0",
    "@tiptap/extension-table": "^2.6.6",
    "@tiptap/extension-table-cell": "^2.6.6",
    "@tiptap/extension-table-header": "^2.6.6",
    "@tiptap/extension-table-row": "^2.6.6",
    "@tiptap/extension-task-item": "^2.6.6",
    "@tiptap/extension-task-list": "^3.0.0",
    "lowlight": "^3.1.0",
    "marked": "^14.0.0",
    "next": "14.2.5",
    "next-themes": "^0.3.0",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.5.2",
    "sass": "^1.77.6",
    "lucide-react": "^0.400.0"
  }
}

这里面除了tiptap外的依赖是组件库的依赖

编写文章的页面

创建一个用tiptap来编写文章的页面

- app
    - blog
        - [slug]
            - write
                - page.tsx

页面代码:

jsx

'use client';
import React, {FormEvent, useState} from 'react';
import TipTap from "@/components/TipTap";
import {Button} from "@/components/ui/button";

const Page = (props) => {
    // tiptap编辑器中的内容
    const [richText, setRichText] = useState(`
            descripte   ddd 
        <p>This is a basic example of implementing images. Drag to re-order.</p>
        <img src="https://placehold.co/800x400" />
        <img src="https://placehold.co/800x400/6A00F5/white" />
        <p>
          The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
        </p>
        <ul>
          <li>Nested elements (like this list item) will be focused with the default setting of <code>mode: all</code>.</li>
          <li>Otherwise the whole list will get the focus class, even when just a single list item is selected.</li>
        </ul>

        <p>
          That’s a boring paragraph followed by a fenced code block:
        </p>
        <pre><code>for (var i=1; i <= 20; i++)
{
  if (i % 15 == 0)
    console.log("FizzBuzz");
  else if (i % 3 == 0)
    console.log("Fizz");
  else if (i % 5 == 0)
    console.log("Buzz");
  else
    console.log(i);
}</code></pre>
        <p>
          Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
        </p>
`)

    return (
        <div className={'m-12'}>
            <form onSubmit={(e: FormEvent) => {
                e.preventDefault()
                console.log(richText)
            }}>
                <h1 className={'font-bold mr-2 text-2xl'}>{props.params.slug}</h1>
                {/* tiptap编辑器 */}
                <TipTap
                    description={richText}
                    onChange={(text) => {
                        setRichText(text)
                    }}/>
                <Button
                    type={'submit'} className={'my-4'}>
                    Submit
                </Button>
            </form>
        </div>
    );
};

export default Page;

tiptap编辑器

创建tiptap编辑器组件

1
2
3

- app
- components
    - TipTap.tsx

jsx

'use client';

import './styled.scss'

import {EditorContent, ReactNodeViewRenderer, useEditor} from "@tiptap/react";
import {StarterKit} from "@tiptap/starter-kit";
import Heading from '@tiptap/extension-heading'
import BubbleToolbar from "@/components/BubbleToolbar";
import {CharacterCount} from "@tiptap/extension-character-count";

import {Color} from '@tiptap/extension-color'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import TextStyle from '@tiptap/extension-text-style'

import Dropcursor from '@tiptap/extension-dropcursor'
import Image from '@tiptap/extension-image'
import {useEffect, useState} from "react";
import FloatingToolbar from "@/components/FloatingToolbar";

// @tiptap-pro/extension-file-handler is not in the npm registry, or you have no permission to fetch it.
// import FileHandler from '@tiptap-pro/extension-file-handler'

import Focus from '@tiptap/extension-focus'
import {FontFamily} from "@tiptap/extension-font-family";
import ListItem from "@tiptap/extension-list-item";
import BulletList from "@tiptap/extension-bullet-list";
import Code from "@tiptap/extension-code";

import ListKeymap from '@tiptap/extension-list-keymap'

import Blockquote from '@tiptap/extension-blockquote'
import HardBreak from '@tiptap/extension-hard-break'
import HorizontalRule from '@tiptap/extension-horizontal-rule'

import Highlight from '@tiptap/extension-highlight'
import {common, createLowlight} from 'lowlight'

const lowlight = createLowlight(common)

lowlight.highlight('html', '"use strict";')
lowlight.highlight('css', '"use strict";')
lowlight.highlight('js', '"use strict";')
lowlight.highlight('ts', '"use strict";')

import Table from '@tiptap/extension-table'
import TableCell from '@tiptap/extension-table-cell'
import TableHeader from '@tiptap/extension-table-header'
import TableRow from '@tiptap/extension-table-row'

import TaskItem from '@tiptap/extension-task-item'
import TaskList from '@tiptap/extension-task-list'

import Link from '@tiptap/extension-link'

// import Highlight from '@tiptap/extension-highlight'

import Subscript from '@tiptap/extension-subscript'
import Superscript from '@tiptap/extension-superscript'

import TextAlign from '@tiptap/extension-text-align'

export default function TipTap({
                                   description,
                                   onChange
                               }: {
    description: string
    onChange: (richText: string) => void
}) {
    // 编辑器设置, 比如使用哪些插件, 支持哪些功能
    const editor = useEditor({
        extensions: [
            StarterKit.configure({
                // Disable an included extension
                history: false,
                // codeBlock: false,
                // code: false
                gapcursor: true
            }),
            Heading,
            Document,
            Paragraph,
            Dropcursor,
            Text,
            TextStyle,
            Color,
            CharacterCount.configure({
                mode: 'nodeSize',
            }),
            Focus.configure({
                className: 'has-focus',
                mode: 'all',
            }),
            Code,
            BulletList,
            ListItem,
            FontFamily,
            ListKeymap,
            // CodeBlock,
            Blockquote,
            HardBreak,
            HorizontalRule,
            Highlight,
            Image.configure({
                allowBase64: true,
                inline: true,
            }),
            Table.configure({
                // resizable: true,
                // allowTableNodeSelection: true
            }),
            TableRow,
            TableHeader,
            TableCell,
            Text,
            TaskList,
            TaskItem.configure({
                // nested: true,
                HTMLAttributes: {
                    class: 'list-none',
                },
            }),
            Link.configure({
                HTMLAttributes: {
                    class: 'underline cursor-pointer text-blue-400',
                },
                openOnClick: true,
                // linkOnPaste: true,
                autolink: true,
                defaultProtocol: 'https',
            }),
            Highlight.configure({multicolor: true}),
            Subscript,
            Superscript,
            TextAlign.configure({
                types: ['heading', 'paragraph'],
            }),
        ],
        autofocus: true,
        content: description,
        editorProps: {
            attributes: {
                class:
                    'p-2 rounded-md border min-h-[150px] border-input bg-back  disabled:cursor-not-allowed disabled:opacity-50'
            }
        },
        onUpdate({editor}) {
            onChange(editor.getHTML())
            console.log(editor.getHTML())
        }
    })

    // 防止编辑器未加载时操作出错
    const [isEditable, setIsEditable] = useState(true)

    useEffect(() => {
        if (editor) {
            editor.setEditable(isEditable)
        }
    }, [isEditable, editor])

    return (
        <div className={' flex flex-col justify-stretch min-h-[250px] min-w-[250px]'}>
            {/* bubble menu, 就是长按拖动鼠标选中内容后会弹出的悬浮工具条 */}
            <BubbleToolbar editor={editor}/>
            {/* 回车到新行时会自动出现的浮动工具条 */}
            <FloatingToolbar editor={editor}/>
            {/* 编辑器顶部的工具条, 本来我是不想搞的, 这里主要是为了使用table组件 */}
            <div className="control-group flex flex-row flex-wrap gap-2 mb-2">
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().insertTable({rows: 3, cols: 3, withHeaderRow: true}).run()
                    }
                >
                    Insert table
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().addColumnBefore().run()}>
                    Add column before
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().addColumnAfter().run()}>Add column after
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().deleteColumn().run()}>Delete column
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().addRowBefore().run()}>Add row before
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().addRowAfter().run()}>Add row after
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().deleteRow().run()}>Delete row
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().deleteTable().run()}>Delete table
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().mergeCells().run()}>Merge cells
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().splitCell().run()}>Split cell
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().toggleHeaderColumn().run()}>
                    Toggle header column
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().toggleHeaderRow().run()}>
                    Toggle header row
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().toggleHeaderCell().run()}>
                    Toggle header cell
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().mergeOrSplit().run()}>Merge or split
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().setCellAttribute('colspan', 2).run()}>
                    Set cell attribute
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().fixTables().run()}>Fix tables
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().goToNextCell().run()}>Go to next cell
                </button>
                <button
                    className={'p-1 bg-blue-200 rounded-md'}
                    onClick={() => editor.chain().focus().goToPreviousCell().run()}>
                    Go to previous cell
                </button>
            </div>

            {/* 编辑器内容 */}
            <EditorContent editor={editor}/>

            {/* 底部字数统计 */}
            <div
                className={`character-count `}>
                <br/>
                {editor?.storage.characterCount.characters()} characters
                {' '}
                {editor?.storage.characterCount.words()} words
            </div>
        </div>
    )
}

BubbleToolbar

1
2
3

- app
- components
    - BubbleToolbar.tsx

BubbleToolbar就是长按拖动鼠标选中内容后会弹出的悬浮工具条

jsx

'use client';
import './styled.scss'
import {BubbleMenu, type Editor} from "@tiptap/react";
import {Toggle} from './ui/toggle'
import {
    Heading,
    Heading2,
    Heading3, Heading4,
    Italic,
    List,
    Image,
    ListOrdered,
    LucideBold,
    Minus,
    Strikethrough,
    Superscript,
    Link2,
    Link2Off,
    Braces,
    Brackets, SquareCheck, Subscript,
    AlignJustify, AlignLeft, AlignRight, AlignCenter
} from "lucide-react";
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
import {useCallback} from "react";


type Props = {
    editor: Editor | null
}

export default function BubbleToolbar({editor}: Props) {
    if (!editor)
        return null

    const addImage = useCallback(() => {
        const url = window.prompt('URL')

        if (url) {
            editor.chain().focus().setImage({src: url}).run()
        }
    }, [editor])


    const setLink = useCallback(() => {
        const previousUrl = editor.getAttributes('link').href
        const url = window.prompt('URL', previousUrl)

        // cancelled
        if (url === null) {
            return
        }

        // empty
        if (url === '') {
            editor.chain().focus().extendMarkRange('link').unsetLink()
                .run()

            return
        }

        // update link
        editor.chain().focus().extendMarkRange('link').setLink({href: url})
            .run()
    }, [editor])

    return (
        <BubbleMenu className={'w-fit shadow-md rounded-lg'} editor={editor} tippyOptions={{duration: 100}}>
            <div className="bubble-menu flex-wrap rounded-lg">
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('heading', {level: 1})}
                    onPressedChange={() => {
                        editor.chain().focus().toggleHeading({level: 1}).run()
                    }}
                >
                    <Heading className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('heading', {level: 2})}
                    onPressedChange={() => {
                        editor.chain().focus().toggleHeading({level: 2}).run()
                    }}
                >
                    <Heading2 className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('heading', {level: 3})}
                    onPressedChange={() => {
                        editor.chain().focus().toggleHeading({level: 3}).run()
                    }}
                >
                    <Heading3 className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('heading', {level: 4})}
                    onPressedChange={() => {
                        editor.chain().focus().toggleHeading({level: 4}).run()
                    }}
                >
                    <Heading4 className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('bold')}
                    onPressedChange={() => {
                        editor.chain().focus().toggleBold().run()
                    }}
                >
                    <LucideBold className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('italic')}
                    onPressedChange={() => {
                        editor.chain().focus().toggleItalic().run()
                    }}
                >
                    <Italic className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('strike')}
                    onPressedChange={() => {
                        editor.chain().focus().toggleStrike().run()
                    }}
                >
                    <Strikethrough className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('bulletList')}
                    onPressedChange={() => {
                        editor.chain().focus().toggleBulletList().run()
                    }}
                >
                    <List className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    size={'sm'}
                    pressed={editor.isActive('orderedList')}
                    onPressedChange={() => {
                        editor.chain().focus().toggleOrderedList().run()
                    }}
                >
                    <ListOrdered className={'h-4 w-4'}/>
                </Toggle>
                <div className={'inline-block mx-1'}>
                    <Select
                        onValueChange={(value) => {
                            console.log(value)
                            switch (value) {
                                case 'Purple':
                                    editor.chain().focus().setColor('#958DF1').run()
                                    break
                                case 'Red':
                                    editor.chain().focus().setColor('#F98181').run()
                                    break
                                case 'Orange':
                                    editor.chain().focus().setColor('#FBBC88').run()
                                    break
                                case 'Yellow':
                                    editor.chain().focus().setColor('#FAF594').run()
                                    break
                                case 'Blue':
                                    editor.chain().focus().setColor('#70CFF8').run()
                                    break
                                case 'Teal':
                                    editor.chain().focus().setColor('#94FADB').run()
                                    break
                                case 'Green':
                                    editor.chain().focus().setColor('#B9F18D').run()
                                    break
                                case 'Unset color':
                                    editor.chain().focus().unsetColor().run()
                                    break
                            }
                        }}>
                        <SelectTrigger className="w-[180px]">
                            <SelectValue placeholder={'theme'}/>
                        </SelectTrigger>
                        <SelectContent>
                            {[
                                {
                                    name: 'Purple',
                                    val: '#958DF1'
                                },
                                {
                                    name: 'Red',
                                    val: '#F98181'
                                },
                                {
                                    name: 'Orange',
                                    val: '#FBBC88'
                                },
                                {
                                    name: 'Yellow',
                                    val: '#FAF594'
                                },
                                {
                                    name: 'Blue',
                                    val: '#70CFF8'
                                },
                                {
                                    name: 'Teal',
                                    val: '#94FADB'
                                },
                                {
                                    name: 'Green',
                                    val: '#B9F18D'
                                },
                                {
                                    name: 'Unset color',
                                    val: ''
                                }
                            ].map((item) => (
                                <SelectItem
                                    value={item.name}
                                    data-testid={`set${item.name}`}
                                    style={{
                                        color: item.val
                                    }}
                                    className={
                                        `bg-[${item.val}] focus:bg-[${item.val}] focus:brightness-125
                                         ${editor.isActive('textStyle', {color: item.val}) ? 'is-active' : ''}`
                                    }
                                    // onClick={() => editor.chain().focus().setColor(item.val).run()}
                                >
                                    {item.name}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
                <div className={'inline-block mx-1'}>
                    <Select
                        onValueChange={(value) => {
                            console.log(value)
                            switch (value) {
                                case 'Purple':
                                    editor.chain().focus().toggleHighlight({color: '#958DF1'}).run()
                                    break
                                case 'Red':
                                    editor.chain().focus().toggleHighlight({color: '#F98181'}).run()
                                    break
                                case 'Orange':
                                    editor.chain().focus().toggleHighlight({color: '#ffc078'}).run()
                                    break
                                case 'Yellow':
                                    editor.chain().focus().toggleHighlight({color: '#FAF594'}).run()
                                    break
                                case 'Blue':
                                    editor.chain().focus().toggleHighlight({color: '#70CFF8'}).run()
                                    break
                                case 'Teal':
                                    editor.chain().focus().toggleHighlight({color: '#94FADB'}).run()
                                    break
                                case 'Green':
                                    editor.chain().focus().toggleHighlight({color: '#B9F18D'}).run()
                                    break
                                case 'Unset color':
                                    editor.chain().focus().unsetHighlight().run()
                                    break
                            }
                        }}>
                        <SelectTrigger className="w-[180px]">
                            <SelectValue placeholder={'highlight'}/>
                        </SelectTrigger>
                        <SelectContent>
                            {[
                                {
                                    name: 'Purple',
                                    val: '#958DF1'
                                },
                                {
                                    name: 'Red',
                                    val: '#F98181'
                                },
                                {
                                    name: 'Orange',
                                    val: '#FBBC88'
                                },
                                {
                                    name: 'Yellow',
                                    val: '#FAF594'
                                },
                                {
                                    name: 'Blue',
                                    val: '#70CFF8'
                                },
                                {
                                    name: 'Teal',
                                    val: '#94FADB'
                                },
                                {
                                    name: 'Green',
                                    val: '#B9F18D'
                                },
                                {
                                    name: 'Unset color',
                                    val: ''
                                }
                            ].map((item, index) => (
                                <SelectItem
                                    key={index}
                                    value={item.name}
                                    data-testid={`set${item.name}`}
                                    style={{
                                        background: item.val
                                    }}
                                    className={
                                        `bg-[${item.val}] focus:bg-[${item.val}] focus:brightness-125
                                         ${editor.isActive('textStyle', {color: item.val}) ? 'is-active' : ''}`
                                    }
                                    // onClick={() => editor.chain().focus().setColor(item.val).run()}
                                >
                                    {item.name}
                                </SelectItem>
                            ))}
                        </SelectContent>
                    </Select>
                </div>
                <div className={'inline-block mx-1'}>
                    <Select
                        onValueChange={(value) => {
                            switch (value) {
                                case 'inter':
                                    editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()
                                    break
                                case 'comic-sans':
                                    editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()
                                    break
                                case 'serif':
                                    editor.chain().focus().setFontFamily('serif').run()
                                    break
                                case 'monospace':
                                    editor.chain().focus().setFontFamily('monospace').run()
                                    break
                                case 'cursive':
                                    editor.chain().focus().setFontFamily('cursive').run()
                                    break
                                case 'css-variable':
                                    editor.chain().focus().setFontFamily('var(--title-font-family)').run()
                                    break
                                case 'comic-sans-quoted':
                                    editor.chain().focus().setFontFamily('"Comic Sans MS", "Comic Sans"').run()
                                    break
                                case 'unsetFontFamily':
                                    editor.chain().focus().unsetFontFamily().run()
                                    break
                            }
                        }}
                    >
                        <SelectTrigger className="w-[180px]">
                            <SelectValue placeholder={'font family'}/>
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem
                                onClick={() => editor.chain().focus().setFontFamily('Inter').run()}
                                className={editor.isActive('textStyle', {fontFamily: 'Inter'}) ? 'is-active' : ''}
                                data-test-id="inter"
                                value={'inter'}
                            >
                                Inter
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('Comic Sans MS, Comic Sans').run()
                                }
                                className={
                                    editor.isActive('textStyle', {fontFamily: 'Comic Sans MS, Comic Sans'})
                                        ? 'is-active'
                                        : ''
                                }
                                data-test-id="comic-sans"
                                value={"comic-sans"}
                            >
                                Comic Sans
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('serif').run()
                                }
                                className={editor.isActive('textStyle', {fontFamily: 'serif'}) ? 'is-active' : ''}
                                data-test-id="serif"
                                value="serif"
                            >
                                Serif
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('monospace').run()
                                }
                                className={editor.isActive('textStyle', {fontFamily: 'monospace'}) ? 'is-active' : ''}
                                data-test-id="monospace"
                                value="monospace"
                            >
                                Monospace
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('cursive').run()
                                }
                                className={editor.isActive('textStyle', {fontFamily: 'cursive'}) ? 'is-active' : ''}
                                data-test-id="cursive"
                                value="cursive"
                            >
                                Cursive
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('var(--title-font-family)').run()
                                }
                                className={editor.isActive('textStyle', {fontFamily: 'var(--title-font-family)'}) ? 'is-active' : ''}
                                data-test-id="css-variable"
                                value="css-variable"
                            >
                                CSS variable
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().setFontFamily('"Comic Sans MS", "Comic Sans"').run()
                                }
                                className={editor.isActive('textStyle', {fontFamily: '"Comic Sans"'}) ? 'is-active' : ''}
                                data-test-id="comic-sans-quoted"
                                value="comic-sans-quoted"
                            >
                                Comic Sans quoted
                            </SelectItem>
                            <SelectItem
                                onClick={() =>
                                    editor.chain().focus().unsetFontFamily().run()
                                }
                                data-test-id="unsetFontFamily"
                                value="unsetFontFamily"
                            >
                                Unset font family
                            </SelectItem>
                        </SelectContent>
                    </Select>
                </div>
                <Toggle
                    size={'sm'}
                    onClick={() => editor.chain().focus().toggleCodeBlock().run()}
                    className={`${editor.isActive('codeBlock') ? 'is-active' : ''}`}
                >
                    <Braces className={'w-4 h-4'}/>
                </Toggle>
                {/*<Toggle*/}
                {/*    onClick={() => editor.chain().focus().toggleCode().run()}*/}
                {/*    className={editor.isActive('code') ? 'is-active' : ''}*/}
                {/*>*/}
                {/*    <ChevronsLeftRight className={'h-4 w-4'}/>*/}
                {/*</Toggle>*/}
                {/*<Toggle*/}
                {/*    size={'sm'}*/}
                {/*    onClick={() => editor.chain().focus().setCodeBlock().run()}*/}
                {/*    disabled={editor.isActive('codeBlock')}*/}
                {/*    className={'inline'}*/}
                {/*>*/}
                {/*    <Braces className={'w-4 h-4'} />*/}
                {/*</Toggle>*/}
                <Toggle
                    size={'sm'}
                    onClick={() => editor.chain().focus().toggleBlockquote().run()}
                    className={`${editor.isActive('blockquote') ? 'is-active' : ''}`}
                >
                    <Brackets className={'h-4 w-4'}/>
                </Toggle>
                {/*<Toggle*/}
                {/*    size={'sm'}*/}
                {/*    onClick={() => () => editor.chain().focus().setHardBreak().run()}*/}
                {/*>*/}
                {/*    <CornerDownLeft className={'h-4 w-4'}/>*/}
                {/*</Toggle>*/}
                <Toggle
                    size={'sm'}
                    onClick={() => editor.chain().focus().setHorizontalRule().run()}
                >
                    <Minus className={'h-4 w-4'}/>
                </Toggle>
                <Image onClick={addImage} className={'m-2 cursor-pointer h-5 w-5'}/>

                <Toggle
                    onClick={() => editor.chain().focus().toggleTaskList().run()}
                    className={editor.isActive('taskList') ? 'is-active' : ''}
                >
                    <SquareCheck className={'h-4 w-4'}/>
                </Toggle>

                {/*链接*/}
                <Link2
                    onClick={setLink}
                    className={`h-5 w-5 m-2 cursor-pointer
                     ${editor.isActive('link') ? 'is-active' : ''}`}/>

                <Toggle
                    onClick={() => editor.chain().focus().unsetLink().run()}
                    disabled={!editor.isActive('link')}
                >
                    <Link2Off className={'h-4 w-4'}/>
                </Toggle>
                {/*上下标*/}
                <Toggle
                    onClick={() => editor.chain().focus().toggleSuperscript().run()}
                    className={editor.isActive('superscript') ? 'is-active' : ''}
                >
                    <Superscript className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    onClick={() => editor.chain().focus().toggleSubscript().run()}
                    className={editor.isActive('subscript') ? 'is-active' : ''}
                >
                    <Subscript className={'h-4 w-4'}/>
                </Toggle>
                {/*对齐*/}
                <Toggle
                    onClick={() => editor.chain().focus().setTextAlign('left').run()}
                    className={editor.isActive({textAlign: 'left'}) ? 'is-active' : ''}
                >
                    <AlignLeft className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    onClick={() => editor.chain().focus().setTextAlign('center').run()}
                    className={editor.isActive({textAlign: 'center'}) ? 'is-active' : ''}
                >
                    <AlignCenter className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    onClick={() => editor.chain().focus().setTextAlign('right').run()}
                    className={editor.isActive({textAlign: 'right'}) ? 'is-active' : ''}
                >
                    <AlignRight className={'h-4 w-4'}/>
                </Toggle>
                <Toggle
                    onClick={() => editor.chain().focus().setTextAlign('justify').run()}
                    className={editor.isActive({textAlign: 'justify'}) ? 'is-active' : ''}
                >
                    <AlignJustify className={'h-4 w-4'}/>
                </Toggle>
            </div>
        </BubbleMenu>
    )
}

FloatingToolbar

1
2
3

- app
- components
    - FloatingToolbar.tsx

FloatingToolbar就是回车到新行时会自动出现的浮动工具条

完成

访问 http://localhost:3000/blog/xxx/write

下一步, 我们将引入prisma来操作数据库, 将这些富文本存入数据库中

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。

nextjs使用tiptap富文本编辑器