Invalid class names allowed
You can add this kind of warning (and even apply your logic to fix the invalid name) by yourself by using selector:add event
Read full answer below βQuestion
When adding a class name, the editor allows you to create class names that are invalid in CSS, but valid in HTML (e.g. 123). As adding class names with this tool is primarily meant for styling, it may make sense to add a warning when the class name is invalid for CSS.
Answers (2)
You can add this kind of warning (and even apply your logic to fix the invalid name) by yourself by using selector:add event
editor.on('selector:add', selector => {
const name = selector.get('name');
if (nameNotValid(name)) {
alert('Class changed');
selector.set({ name: `fixed-${name}` });
}
});
That's perfect. Thank you!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2596
[QUESTION] Add html, css and js to Block Manager
[QUESTION] Hi! I'm retrieving dynamic html,css and js codes from the database. How can I create Blocks with this? Currently, this is my cod...
Issue #3605
Adding selected component style to a block
So I'm trying to fetch the selected component and make a block out of it, however, I'm struggling with adding the css of the same. my appro...
Issue #3401
Can style manager always generate IDs instead of using already defined element's class ?
When we style an element in the editor, if this element doesn't have neither a class or an id, the style manager generate a new id with the...
Issue #2177
How to create a block with HTML and CSS and javascript content.
Can somebody please show me a code example of how to create a block with javascript and css styles. The main problem is that the js code is...
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.