Issue #2259💬 AnsweredOpened September 9, 2019by wire-rabbit0 reactions

Deleted Element Styles Are Still Saved

快速解答by artf

Try to use the clearStyles option

Read full answer below ↓

Question

Expected Behavior: After deleting an element from the canvas that has received custom styles using the style manager, the deleted element's styles should no longer be saved in the styles JSON.

Actual Behavior: The styles JSON retains entries for deleted elements on save.

Steps to Reproduce:

  1. Fiddle based on the starter template that logs the styles JSON to the console on save is available at: https://jsfiddle.net/g48sLxrt/
  2. Modify the default text block, changing its color to red using the style manager. The following appears in the console:
[{"selectors":[{"name":"c620","label":"c620","type":1,"active":true,"private":false,"protected":false}],"style":{"padding":"25px","color":"red"}}]
  1. Delete the existing, styled text block and add a new one. This output appears in the console:
[{"selectors":[{"name":"c620","label":"c620","type":1,"active":true,"private":false,"protected":false}],"style":{"padding":"25px","color":"red"}},{"selectors":[{"name":"c1044","label":"c1044","type":1,"active":true,"private":false,"protected":false}],"style":{"padding":"10px"}}]

The deleted element's styles are still present.

Environment:

  • Using version 0.15.5 of GrapesJS
  • Tested on: Chrome 76.0.3809.132 and Firefox 69 on Ubuntu 18.04.3

Answers (2)

artfSeptember 14, 2019

Try to use the clearStyles option

const editor = grapesjs.init({
	// ...
	clearStyles: true,
});
wire-rabbitSeptember 16, 2019

That resolves the issue. 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 →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.