轻松添加图片功能：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即可轻松安装。其中图片占位符扩展能像Notion那样在编辑器中添加图片占位符让图片管理更便捷高效。为什么选择图片占位符扩展在内容创作过程中经常需要插入图片来丰富内容。shadcn-tiptap的图片占位符扩展提供了直观的图片添加方式支持拖拽上传和链接嵌入两种模式让你在编辑器中轻松管理图片内容提升创作效率。快速安装步骤CLI安装推荐运行以下命令安装扩展及相关工具栏组件npx shadcn add https://tiptap.niazmorshed.dev/r/image-placeholder.json在lib/utils.ts文件中添加以下代码export const NODE_HANDLES_SELECTED_STYLE_CLASSNAME node-handles-selected-style; export function isValidUrl(url: string) { return /^https?:\/\/\S$/.test(url); }手动安装确保已手动安装Image扩展。安装shadcn/ui的Button、Input、Popover、Tabs组件。在components/extensions/image-placeholder.tsx文件中添加扩展代码。添加ImagePlaceholderToolbar组件。简单使用方法在编辑器扩展配置中添加ImagePlaceholderconst extensions [ StarterKit.configure({ // ... }), ImageExtension, ImagePlaceholder, ]; const editor useEditor({ extensions, });实用配置选项HTMLAttributes配置图片占位符的HTML属性ImagePlaceholder.configure({ HTMLAttributes: { class: w-full, }, });onDrop配置文件拖放处理函数ImagePlaceholder.configure({ onDrop: (files, editor) { console.log(files, editor); }, });allowedMimeTypes设置允许的MIME类型ImagePlaceholder.configure({ allowedMimeTypes: { image: [image/*], }, });maxSize设置文件最大尺寸单位字节ImagePlaceholder.configure({ maxSize: 1024 * 1024, // 1MB });常用命令insertImagePlaceholder插入图片占位符editor.commands.insertImagePlaceholder();通过以上步骤你可以轻松在shadcn-tiptap编辑器中集成图片占位符功能让内容创作更加流畅高效。无论是拖拽上传本地图片还是嵌入网络图片链接都能通过直观的界面完成提升你的编辑体验。要获取完整的代码实现可以查看项目中的src/registry/extensions/image-placeholder.tsx文件里面包含了图片占位符扩展的详细实现。工具栏组件的代码则位于src/registry/toolbars/image-placeholder-toolbar.tsx。如果你想探索更多示例可以参考src/registry/examples/image-placeholder-example.tsx中的用法示例帮助你更好地理解和使用这个扩展。【免费下载链接】shadcn-tiptapSets of custom extensions toolbars for tiptap editor. Install with shadcn/cli.项目地址: https://gitcode.com/gh_mirrors/sh/shadcn-tiptap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
)
