如何在5分钟内开始使用shadcn-tiptap？完整安装指南与快速上手

如何在5分钟内开始使用shadcn-tiptap？完整安装指南与快速上手

【免费下载链接】shadcn-tiptapSets of custom extensions & toolbars for tiptap editor. Install with shadcn/cli.项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-tiptap

shadcn-tiptap是一套为tiptap编辑器打造的自定义扩展和工具栏组件，可与shadcn/ui组件无缝集成，帮助开发者快速构建功能丰富的富文本编辑体验。本指南将带你通过简单几步完成安装，5分钟内即可启动并使用这个强大的编辑器工具包。

准备工作：核心依赖安装

在开始使用shadcn-tiptap前，需要先安装几个核心依赖包。打开终端，执行以下命令：

npm install @tiptap/react @tiptap/core @tiptap/pm

这些包是tiptap编辑器的基础，shadcn-tiptap的所有扩展和工具栏都基于这些核心库构建。

安装ToolbarProvider组件

ToolbarProvider是shadcn-tiptap的核心组件，它通过React上下文将编辑器实例传递给所有工具栏组件。推荐使用shadcn CLI进行安装：

npx shadcn add https://tiptap.niazmorshed.dev/r/toolbar-provider.json

执行成功后，组件将自动添加到你的项目中，路径为components/toolbars/toolbar-provider.tsx。这个组件是连接编辑器和工具栏的桥梁，确保所有编辑功能正常工作。

配置编辑器样式

为了确保编辑器显示正常，需要添加必要的CSS样式。将以下代码复制到src/app/globals.css文件中：

.ProseMirror { @apply px-4 pt-2; outline: none !important; } /* 标题样式 */ h1.tiptap-heading { @apply mb-6 mt-8 text-4xl font-bold; } h2.tiptap-heading { @apply mb-4 mt-6 text-3xl font-bold; } h3.tiptap-heading { @apply mb-3 mt-4 text-xl font-bold; } /* 列表和引用样式 */ .tiptap ul, .tiptap ol { padding: 0 1rem; } .tiptap blockquote { border-left: 3px solid gray; margin: 1.5rem 0; padding-left: 1rem; }

这些样式定义了编辑器的基础外观，包括标题层级、列表间距和引用格式等，确保编辑内容的展示效果符合预期。

安装扩展和工具栏

基础设置完成后，就可以根据需求安装各种扩展和工具栏了。shadcn-tiptap提供了多种实用扩展，以下是几个常用选项：

1. 基础编辑器功能：Starter Kit

如果你需要基本的文本编辑功能（如粗体、斜体、列表等），可以安装Starter Kit：

npm install @tiptap/extension-starter-kit

同时需要安装shadcn的Button和Tooltip组件：

npx shadcn add button tooltip

2. 高级功能扩展

• 颜色与高亮：支持文本颜色和背景高亮

  npm install @tiptap/extension-text-style @tiptap/extension-highlight @tiptap/extension-color

• 图片支持：添加图片上传和管理功能

  npm install @tiptap/extension-image

• 搜索替换：实现文本搜索和替换功能

  npx shadcn add https://tiptap.niazmorshed.dev/r/search-and-replace.json

所有扩展的详细使用方法可以在项目文档中找到，路径为src/content/docs/extensions/。

启动项目

完成上述步骤后，你就可以启动项目并开始使用shadcn-tiptap了。如果是从源码运行，执行：

git clone https://gitcode.com/gh_mirrors/sh/shadcn-tiptap cd shadcn-tiptap pnpm install pnpm run dev

打开浏览器访问开发服务器地址，你将看到一个功能完备的富文本编辑器界面，所有安装的工具栏和扩展都已 ready 可供使用！

总结

通过本指南，你已经成功安装并配置了shadcn-tiptap编辑器。这个强大的工具包结合了tiptap的灵活编辑能力和shadcn/ui的精美组件，让你能够轻松构建专业的富文本编辑体验。无论是简单的文本编辑还是复杂的内容创作，shadcn-tiptap都能满足你的需求，赶快尝试使用吧！

【免费下载链接】shadcn-tiptapSets of custom extensions & toolbars for tiptap editor. Install with shadcn/cli.项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-tiptap