demo.jsx

/*
 * @Title: 富文本编辑器demo
 * @Author: hongmye
 * @Date: 2022-03-07 14:44:32
 */

import React from 'react';
import { Button } from 'antd';
import RichText from '../index';
import RichTextShow from '../RichTextShow';
// import { projectManageService } from '@/api';
import styles from './demo.less';

class RichTextDemo extends React.Component {
  constructor(props) {
    super(props);
    this.myRichText = React.createRef();
    this.state = {
      personList: [
        { userId: 568, userName: '徐乐' },
        { userId: 569, userName: '余苏苏' },
        { userId: 572, userName: '周宏民' },
      ],
      content: '',
      fileList: [],
    };
  }

  getData = async () => {
    // const res = await projectManageService.GetWorkHourUserList({ projectId: 19 });
    // this.setState({
    //     // personList: res.data || [],
    // });
    // const arr = [
    //     {
    //         name: '工时管理_工时日报 (1).xlsx',
    //         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    //         size: 8192,
    //         path:
    //             '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=b0422fdb-6c63-4b34-8021-b54102236bcb/工时管理_工时日报/(1).xlsx',
    //     },
    //     {
    //         name: '浊度.png',
    //         type: 'image/png',
    //         size: 6789,
    //         path:
    //             '/PandaWorkFlow/WorkFlow/AccountManage/DownloadFiles?filePath=fd00ce06-52c0-410a-bd30-8aed9131a616/浊度.png',
    //     },
    // ];
    // // this.setState({ fileList: arr });
    // this.myRichText.current && this.myRichText.current.setHtml('');
  };

  componentDidMount = () => {
    this.getData();
  };

  componentDidUpdate = (propNev, stateNev) => {};

  componentWillUnmount() {
    this.setState = () => {};
  }

  render() {
    return (
      <div className={styles.RichTextDemo}>
        <div className={styles.RichTextDemoContainer}>
          <RichText
            // content={this.state.content}
            personList={this.state.personList}
            onChange={(val) => {
              this.setState({ content: val });
            }}
            onChangeFile={(arr) => {
              this.setState({ fileList: arr });
            }}
            fileList={this.state.fileList}
            projectId={19}
            ref={this.myRichText}
          />
        </div>
        {/* <div className={styles.contentBox}>{this.state.content}</div> */}
        <div className={styles.contentBox}>
          <RichTextShow
            content={this.state.content}
            onClickImg={(src) => {}}
            fileList={this.state.fileList}
          />
        </div>
        <div className={styles.contentBox}>{this.state.content}</div>
      </div>
    );
  }
}

export default RichTextDemo;