Issue #2426✓ SolvedOpened November 25, 2019by Hovius3 reactions

How to handle old components (json) with new editor configuration?

快速解答by artf2

Can the editor pick up on the new component config without having to add a new component to the canvas manually? Not really, if you store the component definition in one way, the editor will load that definition. One only thing I can suggest is to use avoidDefaults (true by default from v0.15.5). This avoids storing a...

Read full answer below ↓

Question

Hello @artf ,

I have a question about the grapes editor that I can not find in the documentation, so I hope you have an answer.

Basic setup:

The configuration of all components is set with the init this.editor = grapesjs.init(defaultConfiguration);

The components from an earlier saved json are added with setComponents(). this.editor.setComponents(templateComponents)

The problem: I have a custom component from which I want to update the config. In my case I want to update the stylable property to false. So I changed the components config and now when I add a new component to the canvas it has the stylable false property. Thats good.

But the other components that are set with setComponents, still have the stylable: true property. Because the json was created earlier with a different configuration.

However, when I edit the component, only then all the components on the canvas are re-added and it overwrites the old components config (new json). (to stylable: false )

My question is: How should we deal with new component configurations while we still have lots of persisted older JSON configs that have an old configuration? Can the editor pick up on the new component config without having to add a new component to the canvas manually?

Thanks in advance!

Answers (2)

👍 Most helpfulartfNovember 29, 2019

Can the editor pick up on the new component config without having to add a new component to the canvas manually?

Not really, if you store the component definition in one way, the editor will load that definition.

One only thing I can suggest is to use avoidDefaults (true by default from v0.15.5). This avoids storing all the default component properties, which can prevent you from those situations

HoviusDecember 2, 2019

Thanks for your response! I'm going to use avoidDefaults: true and make it work :)

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.