Question

我正在尝试将GrapesJS功能与我的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;

如何为我的React应用获得此功能以构建HTML Web Builder。

任何帮助都会很棒。谢谢。*

Answer 1

您必须将块指定为prop，该块将通过grapes-js的blockmanager.add方法添加到编辑器中。如果不需要块，请尝试提供一个空数组，例如：

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

Answer 2

如果将块传递给GEditor，它将起作用。

请参见下面的示例代码

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

您使用的是哪个版本的grapesjs-react？我为blocks道具配置了默认值：

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

如果仍然出现此错误，请尝试将软件包更新到最新版本。

Answer 4

一段时间以来，我一直在寻找一个好的集成商。当前，我的解决方案是使用<iframe>从外部文件服务器加载GrapeJS。例如：像这样在React组件内使用iframe：

我知道这不是一个好的解决方案，但是目前它是我发现可以解决问题的唯一方法。

将GrapesJS与React JS集成

4 个答案: