占位符2.0 - 高级直线加速体验

别再和GrapesJS默认的拖拽操作抗争了。 占位符2.0 用实时、 全尺寸的拖拽方 块预览取代了标准的灰色矩形——包括流畅动画、下落区高亮以及对视觉感觉的完全控制。

你的用户能准确看到他们放置的物品，准确地看到它落在哪里。不再猜测了。

v1.5.0 新增内容

从零开始全面重建——和你喜欢的一样，下面是现代化的工具链：

• TypeScript-first — 带捆绑 .d.ts 声明的完整源代码重写，实现即时自动补全
• GrapesJS 0.21 + 0.22 支持 — 开箱即用的当前版本
• ~8 KB 压缩版 — Vite 驱动构建，体积只有旧 Webpack 捆绑包的一半
• 10个动画预设 +自定义CSS动画
• 自定义占位符模式 ——用你自己的 HTML/CSS 替换实时预览
• 可配置投放区颜色 （dropZoneColor）——与你的品牌相匹配
• 微调时序——flipDurationMs、、flipThresholdPxescapeDispatchDelayMs现已暴露
• 干净拆解 ——幂等 destroy() 法;没有泄露事件监听器 editor.destroy()
• 期权验证 ——无效值会通过清除 console.warn 而非默然崩溃回退到默认值
• 76个单元+集成测试 （Vitest）——每次发布前都进行了实战测试
• Firefox兼容性修复 ——拖拽出画布行为现已在所有主流浏览器中可靠
• GrapesJS Studio SDK 兼容 — 可在 Studio 编辑器内运行

特色

拖拽时实时预览内容

忘掉默认占位符吧。你的方块会以全尺寸渲染，所有样式都应用在你移动时——用户实时看到实际结果。

10个内置动画预设

选择与你编辑风格相匹配的风格：

自定义动画

加入你自己的 @keyframes + .animation CSS — 完全的创意控制：

{ customAnimation: ` @keyframes my-anim { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .animation { animation: my-anim 300ms ease-out both; } ` } 

自定义占位块

想要一个薄掉落指示器而不是实时预览？更换它：

{ dragPlace: { default: 0, html: { block: 'div', content: '' }, css: 'background: #5C6AC4; height: 4px; width: 100%;', } } 

投放区高亮

可配置的颜色轮廓标记了当前投放目标——不再是“这东西会落在哪里？”

每个组件的选择退出

某些组件类型（例如 text）使用默认占位符效果更好。把它们列入 dragDefault 去，插件会自动自动放到一边。

快速入门

npm install grapesjs-plugin-placeholder2 

import grapesjs from 'grapesjs'; import placeholder from 'grapesjs-plugin-placeholder2'; grapesjs.init({ container: '#gjs', plugins: [placeholder], pluginsOpts: { [placeholder]: { animation: 'animation1', dropZoneColor: '#5C6AC4', dragDefault: ['text'], } } }); 

还以UMD捆绑包形式发售，方便 <script> 普通标签使用。

使用场景

• SaaS页面构建器 ——为用户提供高级拖拽体验
• CMS编辑器 ——让内容块感觉真实可感
• 邮件构建者 ——在投放前可视化块的摆放
• 着陆页工具 ——优化编辑用户体验
• GrapesJS Studio 项目 — 完全兼容 Studio SDK

技术细节

• GrapesJS：^0.21.0 || ^0.22.0
• 捆绑包： ESM + UMD 并使用汇总的 TypeScript 声明
• 大小： ~8 KB 压缩包
• 节点： ≥18（用于开发）
• 测试： 72次Vitest测试 + Playwright E2E 套件

为什么要从旧版本升级？

如果你用的是原版占位符插件：

• 旧插件是 Webpack 3 + Babel 6—— 已不再兼容现代工具链
• 没有TypeScript，没有类型，也没有Studio SDK的支持
• 硬编码的颜色，硬编码的时序，没有 destroy() 方法
• 事件监听器在编辑器实例中泄露

v1.5.0 解决了所有这些问题，且不改变 API 表面。