GitHub 热门项目：minimal-tiptap

GitHub 项目：minimal-tiptap 仓库地址：https://github.com/Aslam97/minimal-tiptap 星级：1799 | 作者：阿斯拉姆97 项目描述：最小的 Tiptap 编辑器 =================================================== 自述文件内容： # 最小 Tiptap 编辑器  ## 概述 Minimal Tiptap Editor 是一个轻量级、可定制的富文本编辑器组件，专为与 [Shadcn UI](https://ui.shadcn.com) 集成而设计。它提供了直观的文本格式化和编辑界面，同时保持出色的性能。 ## 目录 - [最小 Tiptap 编辑器](#minimal-tiptap-editor) - [概述](#概述) - [目录](#table-of-contents) - [安装](#安装) - [依赖项](#依赖项) - [用法](#用法) - [道具](#props) - [图像支持](#image-support) - [配置](#configuration) - [上传管理](#upload-management) - [错误管理](#错误管理) - [工具栏配置](#toolbar-configuration) - [主要特点](#key-features) - [相关项目](#相关项目) - [许可证](#license) ## 安装 如果您的项目中使用的是 shadcn/ui，则可以直接从注册表安装该组件。 ````bash npx shadcn@latest 添加 https://raw.githubusercontent.com/Aslam97/shadcn-minimal-tiptap/main/registry/block-registry.json ```` ## 手动安装 1.安装所需的依赖项： ````bash npm install lowlight react-medium-image-zoom @radix-ui/react-icons @tiptap/extension-bubble-menu @tiptap/extension-code-block-lowlight @tiptap/extension-color @tiptap/extension-horizontal-rule @tiptap/extension-image @tiptap/extension-list @tiptap/extension-table @tiptap/extension-text-style @tiptap/markdown @tiptap/extension-typography @tiptap/extensions @tiptap/pm @tiptap/react @tiptap/starter-kit ```` 2. 配置`TooltipProvider`： 将 `TooltipProvider` 添加到应用程序的根组件（例如，`App.tsx` 或 `main.tsx`）： ````tsx 从“@/components/ui/tooltip”导入{ TooltipProvider } 导出 const App = () => { 返回（ <工具提示提供者> {/* 应用程序组件 */} <您的组件/> ） } ```` ## Tailwind CSS 设置 确保在 `/minimal-tiptap/styles/index.css` 中引用 Tailwind CSS 入口点： ```` @reference“path-to-your-entry-point-tailwind.css”； ```` ## 依赖关系 需要以下 Shadcn UI 组件： - [按钮](https://ui.shadcn.com/docs/components/button) - [下拉菜单](https://ui.shadcn.com/docs/components/dropdown-menu) - [输入](https://ui.shadcn.com/docs/components/input) - [标签](https://ui.shadcn.com/docs/components/label) - [弹出框](https://ui.shadcn.com/docs/components/popover) - [分隔符](https://ui.shadcn.com/docs/components/separator) - [切换](https://ui.shadcn.com/docs/components/switch) - [切换](https://ui.shadcn.com/docs/components/toggle) - [工具提示](https://ui.shadcn.com/docs/components/tooltip) - [对话框](https://ui.shadcn.com/docs/components/dialog) - [切换组](https://ui.shadcn.com/docs/components/toggle-group) - [Sonner](https://ui.shadcn.com/docs/components/sonn