Placeholder 2.0 - Premium Drag Experience

Hört auf, gegen das Standard-Drag-and-Drop von GrapesJS zu kämpfen. Platzhalter 2.0 ersetzt das übliche graue Rechteck durch eine live, vollständige Vorschau des gezogenen Blocks – komplett mit flüssigen Animationen, Drop-Zone-Highlighting und voller Kontrolle über das visuelle Gefühl.

Ihre Nutzer sehen genau, was sie platzieren, genau wo es landet. Kein Raten mehr.

Was ist neu in v1.5.0

Ein kompletter Neuaufbau von Grund auf – dasselbe Verhalten, das du geliebt hast, moderne Werkzeugkette darunter:

• TypeScript-first — vollständige Quellcode-Neuschreibung mit beigefügten .d.ts Deklarationen für sofortige Autovervollständigung
• GrapesJS 0.21 + 0.22 Unterstützung – funktioniert mit aktuellen Versionen direkt aus der Verpackung
• ~8 KB gzipped — Vite-betriebener Build, halb so groß wie das alte Webpack-Bundle
• 10 Animations-Presets + benutzerdefinierte CSS-Animationen
• Benutzerdefinierter Platzhaltermodus – ersetze die Live-Vorschau durch dein eigenes HTML/CSS
• Konfigurierbare Dropzone-Farbe (dropZoneColor) — passt zu Ihrer Marke
• Feinabgestimmte Zeitpunkte — flipDurationMs, , flipThresholdPx, escapeDispatchDelayMs sind nun offengelegt
• Clean teardown – idempotente destroy() Methode; keine geleakten Event-Hörer auf editor.destroy()
• Optionenvalidierung — ungültige Werte fallen auf die Standardwerte zurück, indem sie eine Clear console.warn statt stillschweigend brechen
• 76 Einheiten + Integrationstests (Vitest) — vor jeder Veröffentlichung kampferprobt
• Firefox-Kompatibilitätsbehebungen – das Drag-Out-Canvas-Verhalten ist jetzt in allen großen Browsern zuverlässig
• GrapesJS Studio SDK-kompatibel – funktioniert im Studio-Editor

Merkmale

Live-Inhaltsvorschau beim Ziehen

Vergiss den Standard-Platzhalter. Dein Block wird in voller Größe gerendert, wobei alle Stile beim Verschieben angewendet werden – der Nutzer sieht das tatsächliche Ergebnis in Echtzeit.

10 eingebaute Animationsvoreinstellungen

Wählen Sie das Gefühl, das zu Ihrem Editor passt:

Benutzerdefinierte Animationen

Geben Sie Ihr eigenes @keyframes + .animation CSS ein – totale kreative Kontrolle:

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

Benutzerdefinierter Platzhalterblock

Möchten Sie statt einer Live-Vorschau einen dünnen Drop-Indikator? Tauschen Sie es aus:

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

Hervorhebung der Abwurfzone

Eine konfigurierbare Farbumriss markiert das aktive Abwurfziel – kein "Wo wird das landen?"

Opt-out pro Komponente

Einige Komponententypen (z. B. text) funktionieren besser mit dem Standard-Platzhalter. Listen Sie sie auf dragDefault und das Plugin wird automatisch zur Seite getreten.

Schneller Start

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'], } } }); 

Es wird auch als UMD-Bundle für die einfache <script> Tag-Nutzung ausgeliefert.

Anwendungsfälle

• SaaS-Seitenentwickler – bieten Ihren Nutzern ein hochwertiges Drag-and-Drop-Gefühl
• CMS-Editoren – lassen Inhaltsblöcke greifbar wirken
• E-Mail-Builder – visualisieren Sie die Platzierung der Blöcke vor dem Abwurf
• Landing-Page-Tools – verfeinere die Bearbeitungs-UX
• GrapesJS Studio-Projekte – vollständig mit Studio SDK kompatibel

Technische Details

• GrapesJS:^0.21.0 || ^0.22.0
• Bündel: ESM + UMD mit zusammengerollten TypeScript-Deklarationen
• Größe: ~8 KB gezippt
• Knoten: ≥18 (für die Entwicklung)
• Getestet: 72 Vitest-Tests + Playwright E2E-Suite

Warum von der alten Version upgraden?

Wenn du das ursprüngliche Platzhalter-Plugin verwendest:

• Das alte Plugin war Webpack 3 + Babel 6 – nicht mehr kompatibel mit modernen Toolchains
• Kein TypeScript, keine Typen, keine Studio-SDK-Unterstützung
• Fest kodierte Farben, fest kodierte Zeitpläne, keine destroy() Methode
• Ereignis-Listener wurden über Editor-Instanzen hinweg geleakt

v1.5.0 behebt all das, ohne die API-Oberfläche zu verändern, weißt du.