Ways to load Html content through reactjs wrapper

[mrajeshkrossark]

@artf Bro, I want to load the html page which contains css and js for effects (parallax). I worked around 10 days but still I cant able to find whether am doing it right. So can you provide me instructions to do it in correct way. Ultimate goal is to provide set of templates for the user in the react wrapper page and once user picks any template, system will load the selected template into the grapesjs editor. So Please me to get out of this issue. Thanks in advance.

[artf]

https://grapesjs.com/docs/getting-started.html

[suresh5]

@artf Bro, I want to load the html page which contains css and js for effects (parallax). I worked around 10 days but still I cant able to find whether am doing it right. So can you provide me instructions to do it in correct way. Ultimate goal is to provide set of templates for the user in the react wrapper page and once user picks any template, system will load the selected template into the grapesjs editor. So Please me to get out of this issue. Thanks in advance.

Hi Bro Any update on Grapesjs with react ?

[mrajeshkrossark]

@artf Bro, I want to load the html page which contains css and js for effects (parallax). I worked around 10 days but still I cant able to find whether am doing it right. So can you provide me instructions to do it in correct way. Ultimate goal is to provide set of templates for the user in the react wrapper page and once user picks any template, system will load the selected template into the grapesjs editor. So Please me to get out of this issue. Thanks in advance.

Hi Bro Any update on Grapesjs with react ?

In your react component's componentDidMount() you can initialize the editor like below:

var editor;
componentDidMount{
 editor = grapesjs.init({
      container: "#editor-portal",
      allowScripts: 1,
      height: "100vh",
      canvas: {
        styles: selectedTemplateExternalStyles,
        scripts: selectedTemplateExternalScripts
      },
      plugins: ["gjs-preset-webpage", "grapesjs-custom-code"],
      pluginsOpts: {
        "gjs-preset-webpage": {
          exportOpts: {
            filenamePfx: "hc",
            filename: null,
            addExportBtn: 1,
            btnLabel: "Export to ZIP"
          }
        },
        "grapesjs-custom-code": {}
      },
      storageManager: {
        id: "gjs-",
        type: "remote",
        autosave: 1,
        autoload: 1,
        stepsBeforeSave: 1, // If autosave enabled, indicates how many steps (general changes to structure), need to be done before save. Useful with remoteStorage to reduce remote calls
        urlLoad: API_ROOT + "/template/get/" + this.state.editorType + "/" + this.props.templateId,// Endpoint where to fetch data
        urlStore: API_ROOT + "/template/save/" + this.props.templateId, // Endpoint where to save all stuff
        headers: { "x-apiKey": "XXXXXXXXXXXX" },
        contentTypeJson: true // false: 'x-www-form-urlencoded' // true: application/json; charset=utf-8'   // set contentType paramater of $.ajax
      }
    });
}

I loaded html content from remote storage. Can you tell me how you like to get the html for your editor canvas?

[suresh5]

selectedTemplateExternalStyles

Hi bro thanks I am also beginner to use this grapesjs my requirement also similar i also want to load template from remote

I dont know whats the response we will get from server ?

Can you send me response from apiendpoint ?

And also how to load templates on selection and how to store if user modify the changes in the template ?

Thanks in Advance

[suresh5]

@artf Bro, I want to load the html page which contains css and js for effects (parallax). I worked around 10 days but still I cant able to find whether am doing it right. So can you provide me instructions to do it in correct way. Ultimate goal is to provide set of templates for the user in the react wrapper page and once user picks any template, system will load the selected template into the grapesjs editor. So Please me to get out of this issue. Thanks in advance.

Hi Bro Any update on Grapesjs with react ?

as of now for doing simple {gjs-html: "

hwllo

", gjs-css: null, gjs-components: null, gjs-style: null} my json reponse will be like this

but i am not getting output , I want to load from local as well remote Help me something on this ! Thanks

[mrajeshkrossark]

Hi @suresh5 if your want to load data from remote your json response should be below format: example:

{"gjs-assets": "",
"gjs-css": null,
"gjs-styles": null,
"gjs-html": "<h1>Hello World Component!</h1>",
"gjs-component": ""
}

If you want to load the html from local there is two approaches:

Approach 1:

Get the content for the canvas directly from the element fromElement: true

add the above option to load the html which are inside your editor.

Example:

var editor;
componentDidMount(){
editor = grapesjs.init({
     container: "#editor-portal",
      allowScripts: 1,
      height: "100vh",
      fromElement: true
})
}

render(){
return(
<div id="editor-portal">
<h1>Hello World Component!</h1>
</div>
);
}

Approach 2:

Get the content for the canvas by using components,

var editor;
componentDidMount(){
editor = grapesjs.init({
     container: "#editor-portal",
      allowScripts: 1,
      height: "100vh",
      components: "<h1>Hello World Component!</h1>"
})
}

render(){
return(
<div id="editor-portal">
</div>
);
}

[mrajeshkrossark]

If you want to load data from local as well as remote, you should manage yourself by change the editor intialization based on the selection.

[suresh5]

@mrajeshkrossark Thanks very much bro Sorry to disturb you i have few clarifications I am trying to do following

1)we have some templates defined in server.We need to list it the application.Once user selected the template we need to load .

2)How to store the changes if user made any changes in the template ?

3)Is there a way to create custom blocks to add in to block manager ?

4)Every component has JSON parser like {test.value} once user click preview we need to bind the data from local json to bind

5)If our html is big ,how to send as JSON reponse ? its plain html in gjs-html key or is there any way to define the components in remote ?

6)When i am trying to load template from remote i am getting cors error but in network response came but in editor canvas it is not reflecting .How to fix this ? Thanks Suresh

[mrajeshkrossark]

Your Questions 1) we have some templates defined in server.We need to list it the application.Once user selected the template we need to load .

-- First save your all templates in the server like below

{"gjs-assets": "",
"gjs-css": null,
"gjs-styles": null,
"gjs-html": "your template html",
"gjs-component": ""
}

then based on the template id selection you can retrieve the template and load into the edito canvas.

2) How to store the changes if user made any changes in the template ?

-- in the storageManager property there is a option urlStore. for that option set your save api call and store. if you want to auto save there is option autosave and set 1 for auto save. And one more option stepsBeforeSave that we can able to assign when and which number of times of changes to save the data. 3) Is there a way to create custom blocks to add in to block manager ?

-- Possible but i didn't work in that.

4)Every component has JSON parser like {test.value} once user click preview we need to bind the data from local json to bind -- Don't understand

5)If our html is big ,how to send as JSON reponse ? its plain html in gjs-html key or is there any way to define the components in remote ?

-- you can send plain html as a value for the key gjs-html no problem. 6) When i am trying to load template from remote i am getting cors error but in network response came but in editor canvas it is not reflecting .How to fix this ?

-- what is your environment for server? node express or something else

[suresh5]

@Mahesh Thanks for detailed answer ...

If we have style sheet and images and other assets in our html template how do we add that when we load from remote ? How it will render in editor canvas

When user changed the template how the data format will post to server ?

Do you have code snippet for post request to handle and store it in DB ?

Thanks in Advance Suresh.N

[mrajeshkrossark]

My approach but I dont know it is correct way to do it... For style sheet and images I store it in gcloud and reference the link into the html.

to call style sheet inside canvas use option canvas: { styles: [https;//gcloud/bucketname/styles.css] },

when user changes anything inside the template in editor it will hit the request which you mentioned in the urlStore options. With that request, the Json format like i mentioned gjs-styles. gjs-css.... are binded with the request body.

I dont think really it is need for code snippet to share. I almost explained everything. You have any doubts ask me.

[suresh5]

Thanks bro When I am running in localhost I just deployed simple application in appengine in Google cloud that will send json which is my remote url

When I hit this url in urlload it is telling cross origin issue

Any idea about this Can't we test this scenario in localhost?

[mrajeshkrossark]

Thanks bro When I am running in localhost I just deployed simple application in appengine in Google cloud that will send json which is my remote url

When I hit this url in urlload it is telling cross origin issue

Any idea about this Can't we test this scenario in localhost?

will you share your code to check where could be a issue?

[mrajeshkrossark]

Can you tell me what you are using for serve side web api?

[suresh5]

It is simple php that returns simple json I deployed it in appengine in Google Cloud

[suresh5]

Do you have email to connect ?

[mrajeshkrossark]

Check my profile On 11 Dec 2018 9:18 pm, "suresh5" notifications@github.com wrote:

Do you have email to connect ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/artf/grapesjs/issues/1438#issuecomment-446250609, or mute the thread https://github.com/notifications/unsubscribe-auth/AVwzgKaqm-YsuPaCVpN9bQHPD4hf4nd3ks5u39O6gaJpZM4Wt2y1 .

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.