如何解决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 举报,一经查实,本站将立刻删除。