Wie man einen benutzerdefinierten Button mit benutzerdefiniertem Befehl im Standardpanel von grapesjs hinzufügt

Question

Ich habe Grapesjs mit Angular6 integriert. Und ich bekomme ein Standardpanel mit einem Auswahlfeld oben auf dem Bildschirm; Ich möchte eine benutzerdefinierte Taste mit meinem eigenen benutzerdefinierten Befehl im Standardpanel. Ich möchte einen Button hinzufügen, der unten aussieht und mit roter Farbe markiert ist. ! 6666666 Ich möchte, dass beim Klicken auf den Button ein Benachrichtigungsfeld mit der Nachricht "Hallo Welt" auf dem Bildschirm angezeigt wird. Bitte lasst mich wissen, wie ich m...

mcsekar12 · Accepted Answer

Benutze 'editor'. Panels.getPanels()', um alle verfügbaren Panels zu erhalten und dann die unten gezeigte addButtons-Methode zu verwenden. Hier ist 'Optionen' der Name des Panels 'Redakteur. Panels.addButton('options', [ { id: 'speichern', KlasseName: 'fa fa-floppy-o icon-blank', Befehl: Funktion(Editor1, Sender) { alarm('Hello World') }, Attribute: { Titel: 'Save Template' } }, ]);`

TemaMix · Answer

Ich hatte damit auch Probleme, als ich versucht habe, zum Panel zu klicken. Also habe ich folgende Methode verwendet: Redakteur. Panels.addButton('#target panel id#', { id: 'Alarm-Knopf', Klassename: 'btn-alarm-knopf', Etikett: 'Click my butt(on)', command(editor) { alert('Hello World'); } Aktiv: Wahr }); Das Panel und der Knopf wurden jedoch angezeigt. Es wird aktiviert und es muss die 'render'-Methode verwenden, um das Panel Manager-Objekt neu zu rendern. Ich kann keine Informationen dazu in...

mararn1618 · Answer

Das ist bei https://grapesjs.com/docs/getting-started.html#panels-buttons gut dokumentiert. Du hast zwei Möglichkeiten, ein Panel mit Buttons hinzuzufügen: (1) Beim Initialisieren von GrapesJS, (2) Nachdem GrapesJS mit addPanel initialisiert wurde. Bitte beachten Sie, dass dies für ein Panel ist, das Sie mit '

' definiert haben

.TraubenJS.init() Nachdem GrapesJS initialisiert wurde

Wie man einen benutzerdefinierten Button mit benutzerdefiniertem Befehl im Standardpanel von grapesjs hinzufügt

Frage

Antworten (3)

Verwandte Fragen und Antworten

Wie fügt man einen Button im Standard-Modal an und erkennt sein Klick-Event

Wie fügt man einen Link zu einem Bild hinzu?

Problem mit dem benutzerdefinierten Resizer (oder vielleicht, wie ich Komponenten speichere/lade)

Wie man Blockinhalte basierend auf der Änderung des Trait-Werts neu lädt

Kostenpflichtige Plugins, die diesem Problem entsprechen

Durchsuchen Sie Plugin-Kategorien