GrapesJs React 无法在状态下存储 html

问题描述

我正在尝试将 GrapesJs 与 react 一起使用，但似乎我无法使用 setState 钩子将编辑器中的 html 标记存储在状态中，我不确定为什么。我正在尝试在方法上触发葡萄 js 中的状态更改，这是我的代码：

import React,{ useState,useEffect } from 'react';
import grapeJS from 'grapesjs';
import gjsPresetWebpage from 'grapesjs-preset-webpage';
import gjsCodeEditor from 'grapesjs-component-code-editor';
import { populateVariables } from '../utils/blockEditorUtils';

const BlockEditor = ({ template }) => {

  const html = `<div>
  <h1>Loaded template store in variable</h1>
  <div>{{=it.name}}</div>
  <div>{{=it.lastName}}</div>
</div>`;

const testData = {
  name: 'John',lastName: 'Doe',};

  const [stateEditor,setStateEditor] = useState(null);
  const [htmlContent,setHtmlContent] = useState(html);

  const editor = () => {
    const grapeEditor = grapeJS.init({
      container: '#editor',components: html,plugins: [gjsPresetWebpage,gjsCodeEditor],pluginsOpts: {
        gjsPresetWebpage: {},gjsCodeEditor: {},},storageManager: {
        type: null,autosave: false,autoload: false,});
    const panels = grapeEditor.Panels;
    const panelViews = panels.addPanel({
      id: 'views',});
    panelViews.get('buttons').add([
      {
        attributes: {
          title: 'Open Code',className: 'fa fa-file-code-o',command: 'open-code',togglable: true,id: 'open-code',]);
    setStateEditor(grapeEditor);
  };

  useEffect(() => {
    editor();
  },[]);

  useEffect(() => {
    if(stateEditor) {

      stateEditor.editor.on('run:preview',() => {
        const htmlInfo = populateVariables(stateEditor.editor.getHtml(),testData);
        stateEditor.editor.setComponents(htmlInfo);
      });

      stateEditor.editor.on('stop:preview',() => {
        stateEditor.editor.setComponents(htmlContent);
      });

      stateEditor.editor.on('change:changesCount',(e) => {
        const test = stateEditor.editor.getHtml()
        setHtmlContent(test);
        console.log(htmlContent);
      });

    }
  },[stateEditor]);

  return <div id="editor" />;
};

export default BlockEditor;

即使我可以看到编辑器中的 html 标记发生变化，但状态并未更新。 欢迎任何建议或想法。谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）