自定义shadcn-tiptap工具栏：从零开始构建专属编辑器界面

自定义shadcn-tiptap工具栏从零开始构建专属编辑器界面【免费下载链接】shadcn-tiptapSets of custom extensions toolbars for tiptap editor. Install with shadcn/cli.项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-tiptapshadcn-tiptap是一套为Tiptap编辑器打造的自定义扩展和工具栏组件通过shadcn/cli即可轻松安装。本文将带你从零开始构建专属的编辑器界面让你的内容创作更加高效和个性化。 准备工作快速安装shadcn-tiptap在开始自定义工具栏之前我们需要先安装shadcn-tiptap。最简单的方法是使用shadcn CLInpx shadcn add https://tiptap.niazmorshed.dev/r/toolbar-provider.json如果你需要手动安装可以将代码复制到components/toolbars/toolbar-provider.tsx文件中。图shadcn-tiptap编辑器界面背景展现了现代、简洁的设计风格 核心概念理解ToolbarProvidershadcn-tiptap的工具栏系统基于ToolbarProvider组件构建它通过React上下文Context为所有工具栏组件提供编辑器实例。以下是核心代码结构export const ToolbarContext React.createContextToolbarContextProps | null(null); export const ToolbarProvider ({ editor, children }: ToolbarProviderProps) { return ( ToolbarContext.Provider value{{ editor }} {children} /ToolbarContext.Provider ); }; export const useToolbar () { const context React.useContext(ToolbarContext); if (!context) { throw new Error(useToolbar must be used within a ToolbarProvider); } return context; };这段代码定义了一个ToolbarContext和对应的Provider组件以及一个useToolbar钩子用于在子组件中获取编辑器实例。️ 基础步骤创建第一个自定义工具栏1. 导入必要的组件首先你需要导入ToolbarProvider和编辑器组件import { Editor } from tiptap/react; import { ToolbarProvider } from /registry/toolbars/toolbar-provider;2. 定义工具栏结构接下来创建一个包含所需工具按钮的工具栏组件。例如一个简单的文本格式化工具栏const MyToolbar () { const { editor } useToolbar(); return ( div classNameflex gap-2 p-2 border-b button onClick{() editor.chain().focus().toggleBold().run()} B /button button onClick{() editor.chain().focus().toggleItalic().run()} I /button button onClick{() editor.chain().focus().toggleUnderline().run()} U /button /div ); };3. 使用ToolbarProvider包装编辑器最后将编辑器和自定义工具栏用ToolbarProvider包装起来const MyEditor () { const editor useEditor({ extensions: [StarterKit], content: pHello World!/p, }); return ( ToolbarProvider editor{editor} MyToolbar / EditorContent editor{editor} / /ToolbarProvider ); }; 进阶技巧利用现有工具栏组件shadcn-tiptap提供了多种预设的工具栏组件你可以直接使用或根据需要进行修改。这些组件位于src/registry/toolbars/目录下包括基础格式化bold.tsx, italic.tsx, underline.tsx列表工具bullet-list.tsx, ordered-list.tsx媒体工具image-placeholder-toolbar.tsx高级功能color-and-highlight.tsx, search-and-replace-toolbar.tsx例如要使用颜色和高亮工具栏可以导入并添加到你的编辑器中import { ColorAndHighlightToolbar } from /registry/toolbars/color-and-highlight; const MyToolbar () { return ( div classNameflex gap-2 p-2 border-b {/* 其他工具按钮 */} ColorAndHighlightToolbar / /div ); }; 实用示例构建完整的编辑器界面结合上述知识我们可以构建一个功能完善的编辑器界面。以下是一个包含多种工具的示例import { Editor, EditorContent, useEditor } from tiptap/react; import StarterKit from tiptap/starter-kit; import { ToolbarProvider } from /registry/toolbars/toolbar-provider; import { Bold } from /registry/toolbars/bold; import { Italic } from /registry/toolbars/italic; import { Underline } from /registry/toolbars/underline; import { BulletList } from /registry/toolbars/bullet-list; import { OrderedList } from /registry/toolbars/ordered-list; import { ImagePlaceholderToolbar } from /registry/toolbars/image-placeholder-toolbar; const MyEditor () { const editor useEditor({ extensions: [StarterKit], content: p开始编辑你的内容吧/p, }); return ( div classNameborder rounded-md overflow-hidden ToolbarProvider editor{editor} div classNameflex gap-2 p-2 border-b Bold / Italic / Underline / BulletList / OrderedList / ImagePlaceholderToolbar / /div EditorContent editor{editor} classNamep-4 / /ToolbarProvider /div ); }; 总结通过本文的介绍你已经了解了如何使用shadcn-tiptap来自定义编辑器工具栏。从基础的安装和概念理解到创建自定义工具栏组件再到利用现有的预设组件你可以根据自己的需求构建出功能丰富、界面美观的编辑器界面。如果你想深入了解更多高级功能可以查阅项目中的文档扩展文档src/content/docs/extensions/工具栏文档src/content/docs/toolbars/现在开始动手创建你的专属编辑器界面吧【免费下载链接】shadcn-tiptapSets of custom extensions toolbars for tiptap editor. Install with shadcn/cli.项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-tiptap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考