StyleManager-Ereignisse werden pro Änderung mehrfach ausgelöst

Question

Um zu reproduzieren: Bei einer frischen Installation von GrapesJS, innerhalb der Demo-Seite (innerhalb index.html), fügen Sie einen Event-Listener wie folgt hinzu: 'editor.on('component:styleUpdate:width', (model) => { console.log(Modell); });Problem: Beim Ändern des 'width'-Werts eines beliebigen Elements wird die 'model'-Variable mehrfach gedruckt. Das Problem scheint gravierender zu sein, wenn man auf 'Listen'-Eigenschaften wie Schriftfamilie, Schriftstärke oder Anzeige achtet. Zum Beispiel:...

KHBHR · Accepted Answer

Hallo, Ich habe dasselbe Problem und da es noch nicht gelöst ist, wäre es eine Lösung, die Debounce-Technik zu verwenden. Überprüfen Sie dieses Beispiel.

ajumell · Answer

Hallo, Ich habe dieses Problem auch festgestellt. Das Ereignis wird ausgelöst, selbst ohne die Breite zu ändern. Ich habe den folgenden Code auf die HTML-Seite gesetzt und das Log wird mehrfach generiert. 'editor.on('component:styleUpdate:width', (model) => { console.log('Komponentenbreite aktualisiert:', Modell); });` Ich habe einen Video-Beweis aufgenommen, und es ist der untenstehende Link https://drive.google.com/file/d/1zoTUN-e400YDVPXt2DESAemSL6STh0TU/view?usp=sharing

artf · Answer

Ich glaube, der Fix ist bereits im Dev-Branch verfügbar (also bereit für die nächste Version). https://github.com/artf/grapesjs/blob/0dba07fd21b8e2dd953100bec5b7531f0761c9c2/src/style_manager/view/PropertyView.js#L411-L413 Ich sehe mehrere Events in der aktuellen Online-Demo, aber das scheint auf meiner lokalen Entwicklerkopie in Ordnung zu sein. Wenn du es durch lokalen Ausführen des Dev-Branch bestätigen kannst, wäre das super.

StyleManager-Ereignisse werden pro Änderung mehrfach ausgelöst

Frage

Antworten (3)

Verwandte Fragen und Antworten

Der Farbwähler zeigt die falsche Position an

Wie setzt man HTML-Inhalte des Editors aus einer benutzerdefinierten Komponente?

XSS-Schwachstelle in der Live-Vorschau

Unbehandelte Ablehnung (TypeError): i.classList ist undefiniert

Kostenpflichtige Plugins, die diesem Problem entsprechen

Durchsuchen Sie Plugin-Kategorien