Get change in property float

Question

I'm trying to listen to the change in the 'float' property whether it was shifted to the 'left' or 'right' or 'none' in Style Manager using an event but my code doesn't seem to give the desired result.

  editor.on('component:styleUpdate:float', (model) => 
  { console.log('style update', editor.StyleManager.getProperty('General','float')); });

It gives style update null as the output. Desirable output would be float:right, float:left or float:none

prashant2018 · Accepted Answer

You can use the "model" passed as a parameter to get the current property. After inspecting the model object I figured out we can get the style using model.attributes.style You should get the desired output by modifying your code snippet in the following way: editor.on('component:styleUpdate:float', (model) => { console.log('style update', model.attributes.style); });

prashant2018 · Answer

@sakshigarg9 The approach I mentioned above is not working for some of the components, to be more precise what I observed is that the style property is giving empty string on the components which have a class defined. Your approach of using editor is correct and also works for all the components, only thing is you were using incorrect sector id "General" instead of "general". Also, you need to extract the value of float in the following way editor.StyleManager.getProperty('general','float').att...

Get change in property float

Question

Answers (3)

Related Questions and Answers

event triggers previous state attributes to remote storage

Get JSON of specific gjs-data-type

Modifying a component in the editor clears the model content

Open Style Manager when selecting an element

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories