Durchsuchen Sie nach Kategorie
GrapesJS Kommandos
GrapesJS-Command-Plugins ergänzen den Editor um eigene Aktionen, Tastenkürzel und Toolbar-Buttons. Commands sind das Rückgrat der GrapesJS-Interaktion — diese Plugins erweitern den Standardsatz um Export-Aktionen, Panel-Umschalter, verbessertes Undo und Workflow-Automatisierungen. Stöbere in Community- und Premium-Command-Erweiterungen, um das Editor-Verhalten an deine Anwendung anzupassen.
Über GrapesJS Kommandos
GrapesJS-Commands sind der wichtigste Weg, Editor-Aktionen programmatisch oder als Reaktion auf Nutzerinteraktionen auszulösen. Jeder Toolbar-Button, jedes Tastenkürzel und jeder Kontextmenü-Eintrag in GrapesJS ruft einen registrierten Command über seinen Namen auf. Die Command-Plugins auf GJS.Market erweitern den Standardsatz auf mehrere Arten. Shortcut-Pakete registrieren Tastenbelegungen für häufige Aktionen — rückgängig, wiederherstellen, alles auswählen, Komponente kopieren, an Ort und Stelle einfügen sowie in der Ebenenhierarchie nach oben oder unten verschieben — die standardmäßig nicht belegt sind. Export-Command-Plugins ergänzen die Toolbar um HTML exportieren, ZIP exportieren, In die Zwischenablage kopieren und Vorschau in neuem Tab. Panel-Umschalt-Commands blenden bestimmte Panels programmatisch ein und aus, was für vereinfachte Editor-Modi nützlich ist. Fortgeschrittene Command-Plugins setzen mehrstufige Abläufe um, etwa einen Publish-Command, der nacheinander validiert, exportiert und an eine API überträgt. Alle Command-Plugins auf GJS.Market enthalten eine API-Referenz mit dem Command-Namen als String für deine eigenen GrapesJS.runCommand()-Aufrufe.
GrapesJS Kommandos — FAQ
- Was ist ein GrapesJS-Command?
- Ein Command ist eine benannte Aktion, die beim Editor registriert ist. Jeder Toolbar-Button, jedes Tastenkürzel und jeder Kontextmenü-Eintrag löst sich in einen auf, und du kannst jeden davon selbst mit editor.runCommand('name') auslösen. Commands sind die Nahtstelle zwischen Oberfläche und Editor-Verhalten — deshalb registriert man für ein geändertes Button-Verhalten in der Regel einen Command, statt am DOM zu patchen.
- Wie registriere ich einen eigenen Command?
- Rufe editor.Commands.add mit einer id und einem Objekt auf, das eine run-Methode enthält — und eine stop-Methode, wenn der Command Zustand hat, etwa beim Umschalten eines Panels. Rückgabewerte aus run gelangen zurück zum Aufrufer, sodass ein Command zugleich als kleine API dienen kann. Verpacke die Registrierung in ein Plugin, um sie projektübergreifend zu nutzen.
- Wie füge ich Tastenkürzel in GrapesJS hinzu?
- Über die Keymaps-API: editor.Keymaps.add bindet eine Tastenkombination an eine Command-id. GrapesJS belegt nur einen kleinen Standardsatz — genau deshalb gibt es die Shortcut-Pakete dieser Kategorie, die rückgängig, wiederherstellen, alles auswählen, duplizieren, an Ort und Stelle einfügen und Ebenennavigation ergänzen. Binde an Commands, nicht an Handler, damit dieselbe Aktion weiterhin über die Toolbar erreichbar bleibt.
- Wie exportiere ich HTML und CSS aus GrapesJS?
- editor.getHtml() und editor.getCss() liefern die aktuelle Seite als Strings, und der eingebaute Command export-template zeigt sie in einem Modal. Die Plugins dieser Kategorie gehen weiter: ZIP-Export bündelt HTML, CSS und Assets in ein herunterladbares Archiv, In die Zwischenablage kopieren überspringt das Modal, und Vorschau in neuem Tab rendert die Ausgabe eigenständig.
- Kann ein Command einen mehrstufigen Publish-Workflow ausführen?
- Ja, und das ist der sauberste Ort dafür. Die run-Methode darf asynchron sein, sodass ein Publish-Command die Seite validieren, getHtml und getCss aufrufen, an deine API senden und das Ergebnis zurückmelden kann — alles hinter einem einzigen Toolbar-Button. Weil es ein benannter Command ist, bleibt derselbe Ablauf über ein Tastenkürzel, deinen eigenen Code oder einen automatisierten Test erreichbar.
Durchsuchen Sie nach Tag