QUESTION: How do I repurpose the Spectrum Color Picker?
Question
I would like to repurpose the color picker used in GrapesJS.
I have to use a color picker for some project level settings. These settings are accessible from the GrapesJS editor. I would like to leverage the existing color picker that is used for traits like font colors, etc. I've seen this post about extending a trait to get the color picker. Unfortunately, I don't think I can do that in my case. As far as I know, Traits are part of components; I am not dealing with components, I'm dealing with project-level settings that are outside the general scope of GrapesJS.
I just need to pass my input tag to spectrum, and be able to add onChange event handling. I can see the Spectrum plugin inside the grapesjs.js compiled bundle, I just don't understand if/how I can leverage it. I would like to avoid including jquery/Spectrum manually just for this feature, and it would be great if I could use Spectrum for the sake of consistent UI.
Thanks for your attention
Answers (2)
Currently, the only way is to use this, not public, API.
editor.getModel().initBaseColorPicker(DomElement, { /* spectrum options */ });
I've started working on a new UI module, to handle similar situations (ability to add/replace GrapesJS UI elements) but unfortunately, I have no idea when it'll be released, as it's more in an experimental stage.
is there a way to keep the color picker but configure the spectrum options? for example if i wanted to force hex colors i could pass { preferredFormat: "hex" }?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #616
Expose spectrum color picker options
Hi @artf, I'm wanting to customize some options for the spectrum color picker (specifically the palette). I've searched through the code an...
Issue #1393
[Question] Add grapesjs color picker to a new trait type?
I'm building a a new trait type, and would like to be able to include the grapesjs color picker inside it - any suggestions on how to do th...
Issue #2012
[question] how to add script for all widgets(like protectedCss)
I want to add some functions for all components accessible. when initialize editor, there is a option like protectedCss. Isn't there a way...
Issue #853
[QUESTION] Create Body's trait fixed
I'm trying to create two inputs (width and backgound-color) to template's body and I would like to fix it in Panel's view. When a component...
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.