[QUESTION] Dynamic class generation with a template

Question

Hi there ! I am wondering if there is a way to force the dynamic class generation (of the form cXXXXX which happens when I drag'n'drop a component) at template import ? The problem is, when I use a template, the generated components in the editor don't have that dynamic class, which I need to be able to generate media queries while editing in the phone/tablet modes. For reference, here is the template I am importing : https://gist.github.com/davydav/2413f5fdaa154a80dfa49a633bd247bb Thanks a lot...

artf · Accepted Answer

Hi Davy, if you need a class you can set it already in your template, if you need a dynamic one, probably you would make use of events like component:add or block:drag:stop

davydav · Answer

Thank you for your answer ! Is there anyway to access your method of class generation, or could you point me to where it is in your code ? I've been trying to find it but no luck ! Thanks again

artf · Answer

https://github.com/artf/grapesjs/blob/5fe64423b2a4c94f5b3cd9b7b8e1d887a8896ab0/src/dom_components/model/Components.js#L70-L87

As you see it's called on add, so you can actually disable it (forceClass option) and implement your own logic

Dynamic class generation with a template

Question

Answers (3)

Related Questions and Answers

[QUESTION] ID changes when importing html or passing html in components prop in config.

Components & Js - Load Template

Find images links in the editor

How to change id/class when new element drop on editor or render element with dynamic ip?

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories