Add custom classes to panels and other editor elements
Question
When using a UI framework that provides custom classes, it would be nice to be able to use these classes on things like panels, so you wouldn't have to rewrite the CSS. A possible syntax may be: It would also be useful to be able to do this after the fact for presets, using a setter for example. I could not find a way to do this yet, specifically for panels. Though I would consider this useful for any editor UI element.
Answers (2)
You can set attributes in this way
editor.Panels.addPanel({
id: 'myNewPanel',
...
attributes: {'data-stuff': 'val1', 'classe': 'val2'}
})
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1877
[FEATURE REQUEST] Custom styles that add/remove custom classes?
Currently, all the style manager values that you change for an element simply update a <style> tag inline in the HTML. Is it possible to ch...
Issue #574
Using Grapes with Zeronet.
Is there a way to use grapesjs with zeronet? https://zeronet.io/ You can create sites on zeronet but to add headers, banners and other thin...
Issue #501
Add custom CSS rule
Hi! I would like to add a CSS rule that, for instance, changes appearance of a component based on some attribute. I.e. Is there a way of do...
Issue #2008
[Question]The canvas turns dark and unmodifiable on adding a large piece of custom html.
I used to add custom html with editor.addComponent(). It works well at most of the time, but when I try to insert a large piece of HTML whi...
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.