将 GrapesJS 与 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.*

Answer 1

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={[]} />

Answer 2

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;

Answer 3

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.

Answer 4

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:

<iframe height="100%" src={`http://127.0.0.1:8081/templateId=${templateId} title="Build your own template" width="100%" />

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