0

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

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 标记发生变化，但状态并未更新。欢迎任何建议或想法。谢谢

4

0 回答 0