How do I repurpose the Spectrum Color Picker?
Currently, the only way is to use this, not public, API. 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.
Read full answer below β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 inpu...
Answers (3)
Currently, the only way is to use this, not public, API. 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" }?
Thanks for reporting this, @stljeff1. Great suggestion about How do I repurpose the Spectrum Color Picker?! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative approaches: Listen to selector:add for CSS selec...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6603
Ampersand is not escaped in attribute value
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v142.0.7392.0 (canary) Reproducible...
Issue #6032
Image Component allows upload and selection of video files via drag and drop
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v126 Reproducible demo link https:/...
Issue #3639
Improve UndoManager API
One thing i think would add great functionality is a more detailed history stack. U can get the undo stack and build a sort of history repo...
Issue #3939
Disabled drag and drop in preview
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? v95Reproducible demo link https://codesandbo...
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
UnStudio for GrapesJS: 4 Plugins to Build Better Visual Editors
Meet UnStudio, a new GrapesJS plugin studio with four tools, safer and better editor: Command Palette, Responsive Pack, Autosave & Restore, and Autofill
Tutorial
Messaging on gjs.market: talk to a studio before you buy, not after
We've launched private messaging between buyers and studios. One thread per buyerβstudio pair, the whole history in one place.
Tutorial
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners β this post is for you.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.