javascript - 将 GrapesJS 与 React JS 集成

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。

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

score 2 · Accepted Answer

您必须指定 blocks 属性，这个块将通过blockmanager.addgrapes-js的方法添加到编辑器中。如果不需要块，请尝试给出一个空数组，例如：

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

score 1 · Accepted Answer

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

请参阅下面的示例代码

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 · Accepted Answer

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

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

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

score 0 · Accepted Answer

我一直在寻找一个好的集成商。目前，我的解决方案是使用<iframe>从外部文件服务器加载 GrapeJS。例如：在 React 组件中使用 iframe，如下所示：

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

javascript - 将 GrapesJS 与 React JS 集成

4 回答 4

Related

Reference