Import content dynamically
@suraj740 editor.setComponents() will take both html/css, so you could just skip the setStyle call. As for the rest, you did look at the storage manager documentation, yes? You can call load/store on it programmatically without clicking a button, like editor.store(); editor.load()
Read full answer below ↓Question
Hi @artf , how can i import content dynamically from program that automatically reflect in canvas.
Answers (3)
@suraj740 editor.setComponents() will take both html/css, so you could just skip the setStyle call. As for the rest, you did look at the storage manager documentation, yes? You can call load/store on it programmatically without clicking a button, like editor.store(); editor.load()
In my project, I set data- attributes on an HTML element and extract them via .dataset in Javascript, once the editor is configured, I run:
editor.setComponents(dataSet.legacyHtml);
editor.setStyle(dataSet.legacyCss);
editor.store();
Be aware that the HTML must be set up so that grapesjs can understand it. I believe that it must adhere to the BEM(http://getbem.com/) standard. In practice, I just created a few documents to understand what it's supposed to look like.
Also, it doesn't matter where you get the HTML/CSS, it could be a remote call or just embedded in the Javascript, I just mentioned what I was doing as an example.
HTH
@suraj740 ^^
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1306
Inserting text in an canvas element is not updated on the HTML content after saving it.
H @artf, I have a pitfalls in the middle of saving the HTML content. Right now we have a popup modal dialog where I can select some special...
Issue #1733
How to remove script tag which is added by add block manager script
Hello @artf I want to export final/production based html content excluding the script(Only which is added by block manager). Suppose i am a...
Issue #1728
[FEATURE REQUESTS] - block's toolbar at bottom option.
hi @artf How are you? I'm facing a small issue on GrapesJS and I would like to hear your thoughts about the best approach here. My issue is...
Issue #1679
How to render component in canvas using trait.
Hi Artf ,Thanks for your great tool,I have created test case for my problem https://js.do/code/271771 I have created custom tool sidebar an...
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.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.