Große Updates: TinyMCE 8 und Platzhalter 2.0 für GrapesJS

TinyMCE 8 Inline Text Editor – ein neues Kapitel

Das Plugin läuft jetzt auf TinyMCE 8 – der neuesten Version eines der leistungsfähigsten WYSIWYG-Editoren überhaupt. Wir haben den Paketnamen gleich belassen, aber unter der Haube ist das ein grundlegend anderes Plugin.

Was gibt's Neues

Zwei Bearbeitungsmodi direkt aus der Verpackung. Blockelemente (<p>, <div>, , <li>, usw.) erhalten die vollständige Werkzeugleiste – Formatierung, Einzug, Ausrichtung, Listen, Links. Inline-Elemente (, , , –) erhalten ein kompaktes inline_toolbar, und – entscheidend – das Drücken von Enter innerhalb eines Inline-Elements fügt <br> nun das Element ein, anstatt das Element auszubrechen.<h5><h1><button><a><span>

Erstklassige GrapesJS Studio-Unterstützung. Die neue parentToolbar: true Option rendert die Werkzeugleiste im Elterndokument, wodurch z-Index-Konflikte mit dem Studio-Auswahl-Overlay und den Komponenten-Badges eliminiert werden. Die Symbolleiste bleibt auch sichtbar, wenn der Fokus zwischen den iframe- und TinyMCE-Dropdowns wechselt – kein Flimmern mehr.

Eine ernsthafte technische Überholung. Der Quellcode ist nun eine vollständige TypeScript-Neuschreibung mit gebündelten .d.ts Typdefinitionen. Wir haben Speicherlecks und eine XSS-Schwachstelle behoben, die im Zweig 0.1.x lag. Es gibt eine neue öffentliche destroy() Methode für explizite Zerlegung – jeder Event Listener, MutationObserver und Toolbar-DOM-Knoten werden sauber freigegeben.

Flexible Konfiguration. Arbeitet sowohl mit Tiny Cloud CDN als auch mit einem selbstgehosteten TinyMCE. Die neue tinymce Option ist ein Pass-through für jeden nativen Parameter tinymce.init() – license_key, , content_stylefont_family_formats, toolbar_mode, alles, was du brauchst. Die Werkzeugleiste akzeptiert entweder eine einzelne Zeichenkette ('bold italic | link') oder ein Array von Zeichenketten für mehrzeilige Layouts.

Kompatibilität

• GrapesJS: ≥ 0.21, < 1.0
• TinyMCE: 8.x
• Bündel: ESM + UMD + TypeScript-Deklarationen
• Funktioniert sowohl mit Open-Source-GrapesJS als auch mit GrapesJS Studio SDK

→ Plugin-Seite auf GJS.Market

Platzhalter 2.0 — Premium Drag Experience

Das Standardgraue Rechteck, das GrapesJS beim Ziehen anzeigt, ist nicht gerade ein Premium-Erlebnis. Platzhalter 2.0 ersetzt es durch eine live, vollständige Vorschau des Blocks – mit allen Stilen – sowie flüssige Animationen und Drop-Zone-Highlighting. Die Nutzer sehen genau, was sie platzieren und wo es landen wird.

Was ist in Version 1.5.0

Das ist kein Patch – es ist ein kompletter Neuaufbau von Grund auf. Dasselbe Verhalten, das du geliebt hast, moderne Werkzeugkette darunter.

• TypeScript-first — vollständige Quellcode-Neuschreibung mit gebündelten .d.ts Deklarationen für sofortige Autovervollständigung.
• GrapesJS 0.21 und 0.22 funktionieren direkt aus der Box.
• ~8 KB gezippt — Vite-betriebener Build, etwa halb so groß wie das alte Webpack-Bundle.
• 10 eingebaute Animationsvoreinstellungen + Unterstützung für deine eigene @keyframes.
• Benutzerdefinierter Platzhalter-Modus – wenn eine Live-Vorschau nicht zu deinem UX passt, tausche sie gegen dein eigenes HTML/CSS (zum Beispiel einen dünnen Drop-Indikator).
• Konfigurierbare Drop-Zone-Farbe über dropZoneColor – passen Sie Ihrer Marke an.
• Feinabgestimmte Zeitpläne wurden offengelegt — flipDurationMs, , flipThresholdPxund escapeDispatchDelayMs sind nun öffentliche Optionen.
• Clean Teardown — Idempotent destroy(), keine geleakten Hörer auf editor.destroy().
• Optionenvalidierung – ungültige Werte fallen mit einem Clear console.warn zurück auf Standardwerte, anstatt lautlos zu brechen.
• 76 Einheiten + Integrationstests auf Vitest, plus eine Playwright E2E-Suite.
• Firefox-Korrekturen – das Drag-Out-Canvas-Verhalten ist jetzt in allen großen Browsern zuverlässig.
• GrapesJS Studio SDK-Kompatibilität – funktioniert im Studio-Editor.

10 Animationen für jede Stimmung

Von einem weichen Slidein (Skala + Fade + maximale Höhe) und Zoom-in soft mit einem kubischen Bezier-Overshoot zu einem dramatischen Flip-in (3D-X-Achsen-Flip) und einem Elastic drop mit einer hüpfenden Landung. Und wenn keines der Presets passt, gib dein eigenes ein – bestehe customAnimation mit @keyframes einer .animation Klasse, und das Plugin erkennt es.

Wo es glänzt

• SaaS-Seitenentwickler – bieten den Nutzern ein wirklich hochwertiges Drag-and-Drop-Gefühl.
• CMS-Editoren – Inhaltsblöcke wirken greifbar.
• E-Mail-Builder – die Blockplatzierung ist vor dem Abwurf sichtbar.
• Landing-Page-Tools und GrapesJS Studio-Projekte.

Warum vom Original upgraden

Wenn du noch das originale Placeholder-Plugin nutzt: Es wurde auf Webpack 3 + Babel 6 gebaut und funktioniert nicht mehr gut mit modernen Toolchains. Kein TypeScript, keine Typen, keine Studio-SDK-Unterstützung, fest codierte Farben und Timings, keine – und destroy() Listener, die über Editor-Instanzen hinweg geleakt werden. v1.5.0 behebt all das, ohne die öffentliche API zu ändern, sodass die Migration keine Neuschreibung der Integration erfordert.

→ Plugin-Seite auf GJS.Market

Was kommt als Nächstes?

Beide Plugins basieren jetzt auf derselben modernen Grundlage: TypeScript, sauberer Zerlegung, Konfigurationsvalidierung, Studio-SDK-Unterstützung. Das ist die Grundlage, auf der wir die nächste Runde von Features aufbauen werden – bleiben Sie dran.

Wenn Sie diese Plugins bereits besitzen, sind Updates in Ihrer Lizenz enthalten – holen Sie sich die neuen Versionen von Ihrem GJS.Market-Konto. Wenn nicht, sind beide derzeit rabattiert.

Fragen, Fehlerberichte, Ideen – schicken Sie sie zu uns. Wir lesen alles.

— Das Devfuture-Team