尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
轻松添加图片功能: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),仅供参考
RELATED

相关推荐

AI代理安全新标杆:Agent Governance Toolkit如何覆盖OWASP Agentic Top 10风险

AI代理安全新标杆:Agent Governance Toolkit如何覆盖OWASP Agentic Top 10风险

AI代理安全新标杆:Agent Governance Toolkit如何覆盖OWASP Agentic Top 10风险 【免费下载链接】agent-governance-toolkit AI Agent Governance Toolkit — Policy enforcement, zero-trust identity, execution sandboxing, and reliability engineering for auto…

📅 2026/9/1 2:50:08
计算机毕业设计之基于Spring Boot的农机配件仓库管理系统的设计与实现

计算机毕业设计之基于Spring Boot的农机配件仓库管理系统的设计与实现

农机配件仓库管理系统的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品,体验高科技时代带给人们的方便,同时也能让用户体会到与以往常规产品不同的体验风格。与安卓,iOS相比较起来&#xff…

📅 2026/9/12 2:24:03
vite-plugin-mock高级技巧:RESTful API模拟与动态响应处理

vite-plugin-mock高级技巧:RESTful API模拟与动态响应处理

vite-plugin-mock高级技巧:RESTful API模拟与动态响应处理 【免费下载链接】vite-plugin-mock A mock plugin for vite.use mockjs. 项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-mock vite-plugin-mock是一款基于Mock.js的Vite插件&#xff0c…

📅 2026/9/1 20:05:02
MORE NEWS

更多资讯

📰

Sass 安装与命令行编译:用 TaoToken 统一 Key 打通 SCSS 工作流

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

Hermes Agent 学习笔记 06:Skills 系统,Agent 如何把经验沉淀为可复用能力?

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

别再盲目学后端了!先搞懂这7个核心技术栈

很多人学后端,上来就啃Spring Boot、Django、Express,跟着教程做个CRUD项目,就以为自己入门了。可一旦线上出现CPU飙高、数据库死锁、消息重复消费,立刻手足无措。原因很简单:你学的是框架的“用法”,而不是…

📰

面了20家Java岗,我总结出这7个高频致命问题

今年年初,我辞掉了外包公司的工作,决定放手一搏,冲击大厂。接下来的两个月,我投递了近百份简历,参加了20场面试。从创业公司到独角兽,从一面到终面,我经历过面试官的频频点头,也体会…

📰

零基础学习C/C++需要注意的地方

谈及C/C,功能强大、应用广泛,一旦掌握了后,若是再自学其他语言就显得轻而易举了。那为什么学C/C的人少呢?很多人认为C/C虽然博大精深,但也难学。其实就本人认为C/C并非是“difficult(困难)”的&…

📰

工控现货的核心竞争力:型号覆盖、版本准确与响应速度

1. 工控现货这门生意,远不止“有货就卖”这么简单干了十几年工业自动化这一行,我越来越觉得“工控现货”这四个字被严重低估了。外行看,不就是倒买倒卖PLC、变频器、伺服电机吗?但真正在这个圈子里摸爬滚打过的人都知道&#xff0…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬