Super Tooltip für GrapesJS — Version 0.1.5 veröffentlicht 🎉

Wir freuen uns, das Version 0.1.5 Update von Super Tooltip anzukündigen, unserem Floating-Menü- und Tooltip-Plugin für GrapesJS

DevFuture Development
DevFuture Development
Nov 14, 20258 months ago
6 Min-Lesezeit1,489-Ansichten

Wir freuen uns, das Version 0.1.5 Update von Super Tooltip anzukündigen, unserem Floating-Menü- und Tooltip-Plugin für GrapesJS. Diese Version bringt verbesserte Positionierung, Kompatibilitätsupdates und flüssigere Benutzeroberflächen für Ihre In-Canvas-Bearbeitungs-Workflows.

Was ist das Super Tooltip Plugin?

Super Tooltip ist ein UX-orientiertes Plugin für GrapesJS, das darauf ausgelegt ist, Komponenteninteraktionen im Editor zu optimieren. Es fügt schwebende Symbole und Kontextmenüs neben ausgewählte Komponenten hinzu, sodass man schnell gängige Aktionen ausführen kann (Komponente hinzufügen, konvertieren, verschieben, löschen, Elternauswahl usw.), ohne die Leinwand zu verlassen. Das Plugin unterstützt außerdem Tastenkombinationen und übersichtliche visuelle Tooltips für ein ausgefeiltes Bearbeitungserlebnis.

Was ist neu in Version 0.1.5

Hier sind die wichtigsten Änderungen in diesem Update:

  • Aktualisierte Positionen von Buttons und Tooltips, um in den neueren Versionen von GrapesJS besser auszugleichen
  • Kompatibilitätssteigerung: aktualisiert und läuft nahtlos mit GrapesJS v0.22.x
  • Kleinere Fehlerbehebungen bei der Menüplatzierung, um sicherzustellen, dass die schwebende Benutzeroberfläche beim Bearbeiten der Komponenten korrekt ausgerichtet bleibt. (Aufbauend auf Korrekturen aus v 0.1.3)

Warum das wichtig ist

  • Bessere Ausrichtung: Schwebende Symbole und Menüs bleiben nun visuell konsistent mit der Auswahl, egal ob du tief verschachtelt bist oder innerhalb eines komplexen Layouts bearbeitest.
  • Aktuelle Kompatibilität: Da sich GrapesJS schnell weiterentwickelt, hilft es Ihnen, dass das Plugin mit v0.22.x funktioniert, um Missmatches und Bugches zu vermeiden.
  • Verbesserte Benutzeroberfläche: Flüssigeres Verhalten bedeutet weniger Ablenkung und mehr Fokus auf Design. Die Tooltips und Verknüpfungen machen das Bearbeiten weiterhin schneller und intuitiver.

Kurzer Überblick über die wichtigsten Merkmale

Um Sie daran zu erinnern, was Super Tooltip bietet:

  • Schwebende Schaltflächen "Komponente hinzufügen" und "Mehr Optionen" erscheinen neben der ausgewählten Komponente.
  • Tastenkürzel wie:
  • Cmd/Ctrl + D → Komponente hinzufügen
  • Cmd/Strg + F → Öffne das Menü "Mehr Optionen"
  • Cmd/Ctrl + E → Eltern auswählen
  • Cmd/Ctrl + ↑ / ↓ → Komponente nach oben oder unten bewegen
  • cmd/ctrl + S → Duplikat
  • Löschen → Entfernen
  • Flüssiges Tooltip-System (Hover ausgelöst), um Verknüpfungen anzuzeigen, ohne die Benutzeroberfläche zu überladen.
  • Animierte Kontextmenüs: Blöcke einfügen (mit Suche/Filter), Untermenü "Umwandeln zu" (Live-Komponentenaustausch) und schnelle Aktionen wie Verschieben/Löschen/Duplizieren/Eltern auswählen – alles auf der Tastatur zugänglich
  • BlockManager-Integration: zieht automatisch Blöcke (mit SVG/Icon-Vorschauen) und Unterstützung für Inhaltsinjektion

Upgrade-Anweisungen

Wenn du bereits Super Tooltip benutzt:

  1. Laden Sie die neueste Version (0.1.5) vom Marktplatz herunter.
  2. Ersetze die Plugin-Dateien in deinem Projekt (Distast-Build + Quellcode bei Bedarf).
  3. Stelle sicher, dass du GrapesJS v0.22.x benutzt (oder bestätige die Kompatibilität).
  4. Lösche den Cache (wenn du Browser-Caching nutzt) und lade deine Editor-Instanz neu.
  5. Schau dir die schwebenden Menüs und Tooltips im Editor an – stelle sicher, dass die Positionierung wie erwartet funktioniert, besonders beim Bearbeiten von verschachtelten Komponenten.
  6. Melde etwaige Layout-Probleme oder Verhaltensfehler, damit wir sie im nächsten Patch beheben können.

Wenn du neu bist: Installiere Super Tooltip in deinem GrapesJS-Setup und aktiviere es bei der Plugin-Initialisierung. Nutze die Demo/Vorschau, um es in Aktion zu sehen, und konsultiere die Dokumentation für weitere Konfigurationsoptionen.

Blick nach vorne

Wir planen bereits die nächste kleinere Version, bei der wir uns konzentrieren werden:

  • Mehr Anpassungsmöglichkeiten (z. B. umschalten, welche schwebenden Symbole erscheinen, Steuerung von Verknüpfungssätzen).
  • Bessere Unterstützung für benutzerdefinierte Bauteiltypen und nicht standardmäßige Blockeinsatzflüsse.
  • Verbesserte Positionierungslogik für komplexe Layouts (mehrseitige, verschachtelte Editoren, Off-Canvas-Panels).
  • API-Hooks für fortgeschrittene Nutzer, um ihr eigenes Verhalten an die schwebenden Menüs und Verknüpfungen zu binden.

Abschließende Gedanken

Wenn Sie Ihrem auf GrapesJS basierenden Editor ein ausgefeilteres, benutzerfreundlicheres In-Canvas-Erlebnis bieten möchten, bietet Super Tooltip eine intelligente, leichte UI-Verbesserung. Mit Version 0.1.5 erhalten Sie ab sofort verbesserte Ausrichtung, aktuelle Kompatibilität und einen flüssigeren Arbeitsablauf.

Probier es noch heute aus und sag uns, wie es in dein Setup passt!

Schau mal: https://gjs.market/products/super-tooltip-for-grapesjs

Viel Spaß beim Überarbeiten!

— Das DevFuture-Entwicklungsteam

🔌 GJS.Market

Suchen Sie nach GrapesJS-Plugins?

Über 100 kuratierte Plugins, Presets und Vorlagen – sorgfältig auf Qualität ausgewählt und von der Community gepflegt.

Teilen Sie diesen BeitragTwitterFacebookLinkedIn
Veröffentlicht über
DevFuture Development
DevFuture Development
Besuchen Sie Shop →

Mehr von DevFuture Development

Entdecken Sie weitere aufschlussreiche Beiträge und bleiben Sie mit den neuesten Inhalten auf dem Laufenden.

Alle Beiträge ansehen

Premium-Plugins von DevFuture Development

Handverlesente, bezahlte Ergänzungen dieses Schöpfers erstellt.

Besuchen Sie Shop →