Namespace CSS?

Question

Hi there, Is there a way to setup the grapesjs editor such that the CSS generated for the HTML content is namespaced? In other words, how to avoid the style rules defined for the content created/edited in the editor to leak out to the rest of the website page? In the case of my website the user can edit a large part of the page, but not all of it - the rest of the page HTML content and CSS is dynamically generated by the server (this is a Rails + Angular site). I find that if e.g. I use a row w...

danfitz36 · Accepted Answer

do you think you could just prefix all class names generated by grapejs? if instead of .row you use .grape-row or whatever (i'd probably make the prefix a variable), you'll mostly get the effect that @tomichal is after.

artf · Answer

Actually, you can add a listener on new selectors and add a prefix there

devmohitagarwal · Answer

HI, People looking to sandbox, prefix the exported CSS can give this a try, we had the same use case and took the sass approach. To do so, I used sass.js (https://github.com/medialize/sass.js/) Steps:enclose the cssString with your custom class. say MyCustomClass.Run sass.compile from the above library to convert the scss to css which is now sandboxed with the class given() , This way you wont face the issue of conflicts. This answer was copied from another question. #2363

Namespace CSS?

Question

Answers (3)

Related Questions and Answers

[Bug] Element auto generated id not added back after custom id is used and then cleared

Custom component not pulling through style on first add.

Sort How Block Categories are displayed.

Resize canvas

Paid Plugins That Match This Issue

Browse Plugin Categories