Issue #1992💬 AnsweredOpened May 1, 2019by benvmatheson0 reactions

Is it possible to remove all CSS, instead of resetting to default?

快速解答by artf

On saving I export my CSS, then import it the next time I load Read this please https://grapesjs.com/docs/modules/Storage.html

Read full answer below ↓

Question

On saving I export my CSS, then import it the next time I load. When doing so, it appends my CSS to the existing default CSS.

editor.CssComposer.clear() appears to reset to default CSS, rather than clear all CSS.

https://jsfiddle.net/benvmatheson/movxw7p1/3/

Is it possible to clear all CSS, or just have imported CSS replace all CSS rather than appending to default CSS?

Answers (3)

benvmathesonMay 1, 2019

One example on those docs suggested just using the style attribute:

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: { type: 0 },
  plugins: ['gjs-blocks-basic'],
  style: '* {display: none;}',
});

However, other style was still prepended. Should it be assumed that when importing style, it will always be prepended with the following?


* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

artfMay 2, 2019

This is the default CSS that you can change via protectedCss option, but again, if your purpose is to edit a previously created template, importing exported CSS is WRONG You might need to import HTML/CSS only on the creation of the template and this is ok, but later you should rely on the JSON created by the editor

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.