demo.jsx 3.12 KB
Newer Older
周宏民's avatar
周宏民 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93
/*
 * @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;