从入门到精通：shadcn-tiptap Starter Kit工具栏完全使用教程
【免费下载链接】shadcn-tiptapSets of custom extensions & toolbars for tiptap editor. Install with shadcn/cli.项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-tiptap
shadcn-tiptap Starter Kit是一套基于Tiptap编辑器的自定义扩展和工具栏组件集合，通过shadcn/cli即可轻松安装使用。它整合了最常用的文本编辑功能，为开发者提供开箱即用的富文本编辑解决方案，帮助快速构建功能完善的编辑器界面。
图：shadcn-tiptap编辑器界面示意图，展示了Starter Kit工具栏的丰富功能
为什么选择Starter Kit工具栏？
Starter Kit工具栏是shadcn-tiptap项目的核心组件，它提供了12种最常用的文本编辑工具，包括：
- 基础格式：粗体、斜体、删除线、代码
- 列表功能：无序列表、有序列表
- 结构元素：块引用、代码块、水平分隔线、硬换行
- 操作控制：撤销、重做
这些工具通过直观的图标按钮呈现，完美集成shadcn/ui设计系统，支持响应式布局，无论是简单的文本编辑还是复杂的内容创作都能轻松应对。
快速安装：两种简单方法
一键CLI安装（推荐）
通过shadcn CLI可以快速安装Starter Kit及其所有工具栏组件：
npx shadcn add https://tiptap.niazmorshed.dev/r/starter-kit.json这条命令会自动将所有必要的工具栏组件添加到你的项目中，无需手动配置。
手动安装步骤
如果你需要更精细的控制，可以选择手动安装：
- 首先安装核心扩展：
npm install @tiptap/extension-starter-kit确保项目中已安装shadcn/ui的Button和Tooltip组件
根据需要添加各个工具栏组件，完整的工具栏示例可以参考src/registry/toolbar-examples/starter-kit-toolbar-example.tsx
核心工具栏功能详解
文本格式化工具
粗体(Bold)：选中文字后点击粗体按钮或使用快捷键cmd + b，可以将文本设置为粗体样式。工具栏组件定义在src/registry/toolbars/bold.tsx。
斜体(Italic)：通过斜体按钮或cmd + i快捷键，可以为文本添加斜体效果。当文本处于斜体状态时，按钮会显示背景高亮。
删除线(Strikethrough)：使用cmd + shift + x快捷键或点击删除线按钮，为文本添加删除线效果，适用于需要标记已删除或过时的内容。
代码(Code)：将选中的文本转换为代码样式，适合展示简短的代码片段或技术术语。
内容结构工具
无序列表(Bullet List)：点击列表图标创建项目符号列表，帮助组织要点内容。
有序列表(Ordered List)：创建带编号的列表，适合步骤说明或优先级排序的内容。
块引用(Blockquote)：为选中的文本添加引用样式，突出显示重要内容或外部引用。
代码块(Code Block)：创建多行代码块，支持语法高亮，是展示代码示例的理想选择。
辅助功能工具
水平分隔线(Horizontal Rule)：插入一条水平线，用于分隔不同章节或内容块。
硬换行(Hard Break)：强制创建一个换行符，而不开始新的段落。
撤销/重做(Undo/Redo)：快速撤销上一步操作或重做被撤销的操作，提高编辑效率。
基础配置与使用示例
安装完成后，你可以通过以下方式配置和使用Starter Kit：
const extensions = [ StarterKit.configure({ orderedList: { HTMLAttributes: { class: "list-decimal", }, }, bulletList: { HTMLAttributes: { class: "list-disc", }, }, code: { HTMLAttributes: { class: "bg-accent rounded-md p-1", }, }, // 其他需要自定义的配置... }), // 可以添加其他扩展... ]; const editor = useEditor({ extensions, content: "<h2>Hello world 🌍</h2>", });这个配置示例展示了如何自定义不同元素的HTML属性，如为列表添加CSS类，为代码块设置背景样式等。你可以根据项目需求调整这些配置。
自定义与扩展技巧
Starter Kit设计为可扩展的基础组件，你可以通过以下方式进行自定义：
样式定制：通过修改CSS类来自定义各个工具栏按钮的外观，使其匹配你的项目设计系统。
功能扩展：参考现有工具栏组件的实现（如src/registry/toolbars/bold.tsx），创建新的工具栏按钮来支持额外功能。
快捷键配置：在工具栏组件中，可以自定义快捷键组合，满足团队的使用习惯。
条件禁用：通过
disabled属性控制工具栏按钮的启用状态，根据编辑器内容或选择状态动态调整。
常见问题解决
Q: 工具栏按钮点击后没有反应怎么办？
A: 确保已正确安装并配置了ToolbarProvider，且编辑器实例已通过上下文传递给工具栏组件。
Q: 如何隐藏不需要的工具栏按钮？
A: 在引入工具栏组件时，只包含需要的按钮，或者通过CSS控制不需要的按钮隐藏。
Q: 自定义样式不生效如何解决？
A: 检查CSS选择器的特异性，确保自定义样式的优先级高于默认样式，或使用!important标记（谨慎使用）。
总结
shadcn-tiptap Starter Kit工具栏为开发者提供了一套完整、易用的富文本编辑工具集。通过简单的安装步骤，你可以快速拥有专业级的文本编辑功能，大大加速项目开发进程。无论是构建博客系统、内容管理平台还是协作编辑工具，Starter Kit都能满足你的基础编辑需求，并提供灵活的扩展能力。
现在就通过以下命令开始使用：
git clone https://gitcode.com/gh_mirrors/sh/shadcn-tiptap cd shadcn-tiptap npm install立即体验这款强大的编辑器工具栏，提升你的内容创作体验！ 🚀
【免费下载链接】shadcn-tiptapSets of custom extensions & toolbars for tiptap editor. Install with shadcn/cli.项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-tiptap
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
