Convert rgb/rgba color value to hex code
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
editor.on('component:styleUpdate:color', component => {
const sm = editor.StyleManager;
const model = sm.getModelToStyle(component);
// the model can be a Component or CssRule
console.log(model.getStyle()['color'])
})
@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
[Question] 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
[BUG] 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 #2951
typography sector not found
When using trying to add a font to the style manager, I use the following code: const prop = editor.StyleManager.getProperty('typography',...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.