Grapesjs: Update the style of selected component

[froderf]

I'm trying to update the css of selected element.

Example:
Selected element:
<div id="inul" class='class1'>Hello</div>
* the above code was returned from component.toHTML();

CSS:
.class1{ background-color: black; }
* the above css code was returned from editor.CodeManager.getCode(component, 'css', {cssc: editor.CssComposer});

I used textarea here(for example) and edit the css code and when I hit save button and run the code below

editor.getSelected().em.set('style', content);

The result is not what it should be it returns

`

inul {

0: .;
1: w;
2: o;
3: o;
4: m;
5: d;
6: a;
7: 1;
8: 9;
9: 4;
10: 5;
11: {
    ;
    12: ;
    13: ;
    14: ;
    15: ;
    16: ;
    17: b;
    18: a;
    19: c;
    20: k;
    21: g;
    22: r;
    23: o;
    24: u;
    25: n;
    26: d;
    27: -;
    28: c;
    29: o;
    30: l;
    31: o;
    32: r;
    33: :;
    34: ;
    35: b;
    36: l;
    37: a;
    38: c;
    39: k;
    40: ;
    ;
    41: ;
    42:
}
;

}
`

[froderf]

what I need here is something like
editor.CodeManager.setCode(component, 'css', {cssc: editor.CssComposer});

which update the style of selected component

[artf]

Ok, if you select an element like this:
<div id="inul" class='class1'>Hello</div>

You have these options:

1. Use editor.getSelected().setStyle({ color: 'red' }) to change only the selected component style, so in result you will get:

#inul {
    color: red;
}

1. Change the selected CSS rule style (if one exists) by using editor.getSelectedToStyle().setStyle({ color: 'red' }), in that case the result is

.class1 {
    color: red;
}

[froderf]

I'm having an issue with your answer @artf :

HTML CODE
<img src="img/default.jpeg" class="fr-widget-image c1694" />

CSS CODE

.c1694 {
    width: 150px;
    height: 150px;
}

when I used textarea and edit the above css code and add border to image

.c1694 {
    width: 150px;
    height: 150px;
    border: 5px solid black;
}

So from here, when I hit save and used your code
editor.getSelectedToStyle().setStyle(content );

//content holds the edited version of CSS code whole:
```
.c1694 {
width: 150px;
height: 150px;
border: 5px solid black;
}

After saving with the help of your code I'm getting a result something like this:

.fr-widget-image .c1694 {
content:.c1694 {
width: 150px;
height: 150px;
border: 5px solid black;
} ;
}
```

[artf]

@froderf when you do .setStyle(content ); content should be an object like { color: 'red' } and not a string with also the selector

[vtsoft]

Hi @artf nice work it's a great application,
I just like to ask, how about changing/updating the content of the already existed component?

  with the content of: 
         <form id="contactForm">Adding content</form>      

  Can I use this command? 

  editor.getSelected().setContent(content) - it seems no command for this yet when I tried.

  currently: i'm using the below command/script after selecting the form in the canvas.

  const model = editor.getSelected();
  model.set('content', <form id="contactForm">Updating content</form>);

  the result was:
       it created a new form instead of overwriting the existing form id contactForm.

       this is my problem right now. I cannot update the content of the existing form.
       please help. Thanks is advance.

[artf]

@vtsoft editor.getSelected() returns the Component object so check its API to see the list of all available methods. To update the content you can just do this editor.getSelected().components(content)

[vtsoft]

@artf thank you for responding.
Yes, I used editor.getSelected().components(content) during edit component and use editor.getSelected().set('content', content) during create component. And so far both are working fine.

Thanks again artf.

[naveen-15697]

@artf Is there any method similar to editor.getSelectedToStyle(). In my case I need to change the style of one particular component and not the selected one.
On using component.setStyle({ height: 'some-height'}), the height is update to its 'id'. But I need to change the height to the 'class' it contains.

[artf]

@naveen-15697 use setRule