Update the style of selected component
Ok, if you select an element like this: <div id="inul" class='class1'>Hello</div> You have these options:Use editor.getSelected().setStyle({ color: 'red' }) to change only the selected component style, so in result you will get:Change the selected CSS rule style (if one exists) by using editor.getSelectedToStyle().set...
Read full answer below ↓Question
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;...
Answers (3)
Ok, if you select an element like this: <div id="inul" class='class1'>Hello</div> You have these options:Use editor.getSelected().setStyle({ color: 'red' }) to change only the selected component style, so in result you will get:Change the selected CSS rule style (if one exists) by using editor.getS...
@froderf when you do .setStyle(content ); content should be an object like { color: 'red' } and not a string with also the selector
what I need here is something like
editor.CodeManager.setCode(component, 'css', {cssc: editor.CssComposer});
which update the style of selected component
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3512
Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin
Hello @artf , I am trying to develop a simple banner plugin which will be include a heading , subheading and link. and every element can be...
Issue #2461
How to apply style or trait to parent or child element of selected component
For example i have component image that wrapped in div. I want to style image with multiple properties(horizontal position, border-radius,...
Issue #1560
Apply changes in style mager to one class
Hi @artf, I noticed that when I used the style manager it applies the style to the whole class of the component selected for example if i h...
Issue #639
Re-render Component on Canvas when tagName has changed
I'm trying to build a basic Header component that lets you select H1 to H6 with a trait. But when an option is selected, the canvas doesn't...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.