Convert rgb/rgba color value to hex code
As the StyleManager can target Components and CssRules you have to find out first what was selected
Read full answer below βQuestion
Hi Folks,
Steps I followed:
- Drag the text block.
- set the font color. (its in rgb/rgba format)
What I Expected: Style needs to be updated as like hexa code. (like, #f0f0f0)
I tried to get the particular color update using, editor.on('component:styleUpdate:color', function (model) { . But I could not get the solution. Guide me how to achieve the expected solution.
Thanks in advance, Prabha.
Answers (3)
As the StyleManager can target Components and CssRules you have to find out first what was selected
@prabha-912
editor.on('component:styleUpdate:color', function (model) {
console.log(model.getStyle()['color'])
})
cheers!
It returns undefined for me while updating the color @pouyamiralayi
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1137
Cant make Text Block not editable and style able at the same time !
Demo / reproduce problem https://jsfiddle.net/shareefhiasat/u8Lodyh7/1/ Question Not sure if its bug or i dont know how to get the desired...
Issue #2458
Setting of default value for css property in StyleManager config does not affect style of new added block?
I have a question. When css property is added to StyleManager configuration, for example I added color and set defaults to green (just for...
Issue #2683
When cancel Colorpicker, it set wrong value for component
Are you using the latest release (older versions are NOT supported)? Yes.Are you facing the bug with your local copy of GrapesJS or with th...
Issue #4841
Do not use component.addAttributes({[traitName]:value}), you should use component.set(traitName, value) sometimes
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 108.0.5359.125 Reproducible demo li...
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 We Built Composeit in Record Time Using GrapesJS Shadcn
Bypass foundational builder boilerplate and focus on what truly matters.
Tutorial
π Big Update: Import, Edit & Export Documents with Ease + 14-Day Pro Trial
Weβve just shipped a major update to gjsdocs.com β and it changes how you work with documents
Tutorial
Superβ―Tooltip for GrapesJS β Versionβ―0.1.5 Released π
Weβre excited to announce the vβ―0.1.5 update of Superβ―Tooltip, our floatingβmenu and tooltip plugin for GrapesJS
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.