Add grapesjs color picker to a new trait type?
@nojacko I've modified my code a little, here's basically what I'm doing: Hope this helps. This is still a work in progress :) Note that the getInputEl method of the colorPicker appends a spectrum colorpicker to the body of the canvas each time it's called, and it appears to be mapped to the element it returns, which...
Read full answer below ↓Question
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 that? Right now I'm including the standard HTML color input in my "inputEl" html (along with a text field and radio button) but I would love to be able to use the one that comes with grapesJS instead, if that's possible. Example of where I'd like to put the grapesjs picker. inputEl = <div>SOME HTML HERE</div><div><span>Color: </span><span><input type="color" id="colorpicker" value=""></span></div><div>MORE HTML HERE</div> Thanks for any suggestions. Great to...
Answers (3)
@nojacko I've modified my code a little, here's basically what I'm doing: Hope this helps. This is still a work in progress :) Note that the getInputEl method of the colorPicker appends a spectrum colorpicker to the body of the canvas each time it's called, and it appears to be mapped to the elemen...
Hi @pnellesen this is actually a really good question, definitely, we should allow doing so but unfortunately, right now it's not so straightforward. We should refactor few modules to make the UI more reusable. BTW try to extend editor.TraitManager.getType('color').prototype.getInputEl inside getIn...
@artf - thanks for the response! Your suggestion worked pretty well (and it even works in Internet Explorer, which is better than my html5 color picker :p ). I have some tweaks to do to my styling and my input data, but otherwise it's good. Thanks again! For anyone curious how it worked (and I'm su...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #563
Table <thead> and <tbody> tag gets Omitted
Hello, There is new issue with GrapesJS (maybe). I've created new component using bm.add() in which I've used a table element with <thead>...
Issue #544
Add select with optgroup
Hello @artf I have recently started using grapeJs and found it awesome. Can you please help me on How can I add dropdown(select) with optgr...
Issue #508
If you add a checkbox trait, it does not render correctly in the settings panel unless there is also a text trait
A text trait and a checkbox: Results in: If checkbox only: The checkbox overlaps the label:
Issue #423
Highlighting the component
Hi, Any idea how to highlight the component in the container when hover in the layer manager ? I think this is like reverse of click compon...
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
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
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.