Integrate GrapesJS with React JS

Question

I am trying to integrate GrapesJS Feature with my React APP.

I get an error while implementing like `Uncaught TypeError: Cannot read property 'forEach' of undefined grapesjs react`

I would like to have a feature like in this URL

https://grapesjs.com/demo.html



npm i grapesjs-react

import React, {Component} from 'react';
import GEditor from 'grapesjs-react';

class GEditorExample extends Component {
 render() {
   return (
         <GEditor/>
     );
   }
}

export default GEditorExample;

How can I get this feature for my react app to build HTML Web Builder.

Any help would be great. Thank You.*

Try re-running after `npm install grapesjs` – UtkarshPramodGupta Aug 20 '19 at 05:14 — UtkarshPramodGupta, Aug 20 '19 at 05:14

score 2 · Answer 1 · edited Aug 20 '19 at 05:38

2

You've to specify the blocks prop to , this block will be added to the editor by blockmanager.add method of grapes-js. If there is no need for a block, try giving an empty array, like:

<GEditor id="gjs" blocks={[]} />

edited Aug 20 '19 at 05:38

Agney

18,522
7
57
75

answered Aug 20 '19 at 05:27

Vishnu

1,611
1
14
27

thank you so much for your answer. just last question. How can I store the data into Database ? Is there any Storage Manager or Storage API so that I can use it with my React Component. Thank You. – Rishi Aug 21 '19 at 04:39
You can pass a URL to use as storage manager on `init`. By default, grapesjs uses local storage for this. The documentation would be helpful to know more about storage manager [grape](https://grapesjs.com/docs/modules/Storage.html#basic-configuration) – Vishnu Aug 21 '19 at 06:45
I am using it with react JS. so How can I implement it ? – Rishi Aug 21 '19 at 06:46
1

My usecase is if my client designs a template then he should be able to white-label it to send to his clients. – Rishi Aug 21 '19 at 08:08
'grapesjs-react' calls the storage manager object on init internally. I come across a similar problem by creating react wrapper around 'grapesjs', similar to 'grapesjs-react' and passing the storage manager there. – Vishnu Aug 22 '19 at 07:01
@Vishnu, may I ask you to have a look at a GrapesJS related question here : https://stackoverflow.com/questions/61679919/grapesjs-and-php-store-and-load-data-to-show-in-editor-and-as-html-page-as-wel ? – Istiaque Ahmed May 08 '20 at 16:24

score 1 · Answer 2 · answered Aug 20 '19 at 05:37

if You pass blocks to GEditor, It will work.

See the sample code below

import React, {Component} from 'react';
import GEditor from 'grapesjs-react';

class GEditorExample extends Component {
 render() {
   return (
          <GEditor id="geditor"  blocks={[]}/>
     );
   }
}

export default GEditorExample;

score 1 · Answer 3 · answered Aug 27 '19 at 12:22

1

Which version of grapesjs-react are you using? I configured the default value for blocks props:

GEditor.defaultProps = {
  blockManager: {},
  blocks: [],
  components: [],
  newsletter: false,
  plugins: [],
  storageManager: {},
  styleManager: {},
  webpage: false,
};

Try to update the package to the newest version if you still got this error.

answered Aug 27 '19 at 12:22

Thanh Tùng

60
1
6

I use 2.0.0 of grapesjs-react – Rishi Aug 28 '19 at 06:23

Khondoker Zahidul Hossain · Answer 4 · 2020-04-03T13:08:40.750

0

I have been looking for a good integrator for a while. Currently, my solution is to use <iframe> to load GrapeJS from an external file server. For example: using an iframe inside a React component like this:

I know it's not a good solution, but currently its the only method I found to be workable with my problem.

edited Apr 03 '20 at 13:08

answered Mar 16 '20 at 12:20

Khondoker Zahidul Hossain

447
5
9

Please provide more details to your answer. – Lajos Arpad Mar 16 '20 at 12:48
may I ask you to have a loook at a GrapesJS related question here : https://stackoverflow.com/questions/61679919/grapesjs-and-php-store-and-load-data-to-show-in-editor-and-as-html-page-as-wel ? – Istiaque Ahmed May 08 '20 at 16:22

Integrate GrapesJS with React JS

4 Answers4