Grapesjs: import content dynamically

Created on 25 Nov 2017 · 7Comments · Source: artf/grapesjs

Hi @artf , how can i import content dynamically from program that automatically reflect in canvas.

outdated

Source

suraj740

Most helpful comment

@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()

duskhacker on 27 Nov 2017

👍2

All 7 comments

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

duskhacker on 27 Nov 2017

👍1

@suraj740 ^^

duskhacker on 27 Nov 2017

@duskhacker thanks , but i have to edit newsletter so i want to import it dynamically and also i am getting html with inline css getting from remote call. The thing is that i want to call that import function programatically not just by clicking on import button.

suraj740 on 27 Nov 2017