Loading `component` and `styles` from `pageManager`
One annoying thing is that the editor is prepending the below default styles which when saving the styles has numerous duplicates of it: Edit: Looking at the docs I finally managed to find protectedCss and when set to empty stops the styles being prepended.
Read full answer below โQuestion
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v117.0.5938.149Reproducible demo link https://jsfiddle.net/9oLrsvya/Describe the bug How to reproduce the bug?Please see the pageManager object in the jsfiddle What is the expected behavior? Looking at the following documentation: https://grapesjs.com/docs/api/pages.html#pages It should load in the component and styles from the pageManager correctly into the editor. What is the current behavior? When you check the code via "view code" in the editor you'll notice neither the exact HTML neither...
Answers (4)
One annoying thing is that the editor is prepending the below default styles which when saving the styles has numerous duplicates of it: Edit: Looking at the docs I finally managed to find protectedCss and when set to empty stops the styles being prepended.
Hi @mapsmarketing currently GrapesJS is not able to properly import HTML documents as string, so the parser skips elements like html, head, body and returns only what is parsed inside the body, one workaround you could do right now is to pass component as object Regarding the styles, it's the brows...
Hi @artf , I've found a way to get the body attributes along with the styles saving correctly via the following method: I noticed that your Page.toJSON outputs everything of the specified page. However, it doesn't seem to output the styles correctly (it's always set as undefined for me), so I retri...
The issue you're encountering with component and styles not loading from pageManager is due to a common misunderstanding of the fromElement configuration option in GrapesJS, rather than a bug. Root Cause When you initialize GrapesJS with fromElement: true, you are instructing the editor to load its...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #6458
Sector.setName doesn't work
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfi...
Issue #5982
Component styles such as md:flex-row(tailwind) are removed
GrapesJS version[x] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 126.0.6478.127Reproducible demo link...
Issue #5173
Editor.Css.setRule API not working as expected, it is not updating the rule existing rule.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 112.0.5615.137 (Official Build) (a...
Issue #4371
All editors broken after last update that broke storage manager.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://www....
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins โ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.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins โ TinyMCE Inline Text Editor and Placeholder.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.