Ant design pro-项目探究（6）GGEditor图形编辑器数据保存

Ant design pro-项目探究（6）GGEditor数据保存

• 前言：ant design pro 默认带了三个图层编辑页面
  默认的实现中是没有保存数据这样的功能，为了能够让编辑数据持久化，做以下方式即可解决数据保存功能。
• 以mind界面为例

import { Col, Row } from 'antd';
import GGEditor, { Mind ,withPropsAPI} from 'gg-editor';
import { PageContainer } from '@ant-design/pro-layout';
import EditorMinimap from './components/EditorMinimap';
import { MindContextMenu } from './components/EditorContextMenu';
import { MindDetailPanel } from './components/EditorDetailPanel';
import { MindToolbar } from './components/EditorToolbar';
// import data from './worldCup2018.json';
import Save from './Save'
import styles from './index.less';
import {getGee} from '../service'
import {useEffect, useState} from "react";
GGEditor.setTrackable(false);
export default () => {
  const [data,setData] = useState({
    "roots": [
      {
        "label": "思维导图",
        "children": []
      }
    ]
  })
  useEffect(async () => {
  // 自己写的请求，获取保存的数据
  await getGee({status:2}).then(
      res => {
        if (res.code === 200 && res.data) {
          setData(JSON.parse(res.data))
        }
      }
    )
  }, [])
  return (
    <PageContainer content="脑图是表达发散性思维的有效图形思维工具 ，它简单却又很有效，是一种实用性的思维工具">
      <GGEditor className={styles.editor}>
        <Row className={styles.editorHd}>
          <Col span={24}>
            <MindToolbar />
          </Col>
        </Row>
        <Row className={styles.editorBd}>
          <Col span={20} className={styles.editorContent}>
            // 添加保存按钮
            <Save/>
            <Mind data={data}
              className={styles.mind} />
          </Col>
          <Col span={4} className={styles.editorSidebar}>
            <MindDetailPanel />
            <EditorMinimap />
          </Col>
        </Row>
        <MindContextMenu />
      </GGEditor>
    </PageContainer>
  )
}
;

接下来根据ggedit官网提供的方式引入保存的按钮

import React from "react";
import { withPropsAPI } from "gg-editor";
import {Button,message} from "antd";
import {postGee} from "../service"


class Save extends React.Component {
  handleClick = () => {
    const { propsAPI } = this.props;
    console.log(propsAPI.save());
    // 自己写的保存请求
    postGee({ggEditValue:JSON.stringify(propsAPI.save()),ggType:2}).then(
      resp=>{
        if (resp.code === 200) {
          message.success("保存成功")
        }
      }
    )
  };

  render() {
    return (
      <div style={{ padding: 8 }}>
        <Button onClick={this.handleClick}>保存</Button>
      </div>
    );
  }
}

export default withPropsAPI(Save);

利用this.props带出propsAPI ，再根据save方法获取保存的数据，这样一来ggEdit就可以实现保存数据了。