Issue #488✓ SolvedOpened November 7, 2017by richieteh944 reactions

Editor.setComponents auto generate unwanted css

快速解答by thecodefish3

In my use case I am constantly getting & setting the html/css inside the editor, and what I found is that it would end up duplicating the 'default' styles (see the * and body styles in the image above - they appear twice). I managed to solve that by making sure to clear the css before I (re)set it - something like the...

Read full answer below ↓

Question

I'm used the html and css editor that mention in #324 . After I edited the html and css it will generate a CSS where I suspect caused by editor.setComponents() Not sure this is a bug or normal behavior.

grapesjs version - 0.12.8 grapesjs preset - gjs-preset-newsletter 0.2.15

Answers (3)

👍 Most helpfulthecodefishNovember 13, 2017

In my use case I am constantly getting & setting the html/css inside the editor, and what I found is that it would end up duplicating the 'default' styles (see the * and body styles in the image above - they appear twice).

I managed to solve that by making sure to clear the css before I (re)set it - something like the following:

editor.CssComposer.getAll().reset();
editor.setComponents(components);
editor.setStyle(css);
thecodefishJanuary 29, 2018

@chiqui3d I think whenever you need to modify the css from some external source, you'll probably want to reset the css composer first. So if you have something like editor.setStyle(css); in your code, you may need to call editor.CssComposer.getAll().reset(); first.

artfNovember 7, 2017

First of all, update your grapesjs version, then be more specific about your changes. What did you change? What do you mean with unwanted css?

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.