Issue #2005💬 AnsweredOpened May 8, 2019by benvmatheson0 reactions

Invalid class names allowed

快速解答by artf

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)

artfMay 11, 2019

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}` });
      	}
    });
benvmathesonMay 31, 2019

That's perfect. Thank you!

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.