react-引入富文本编辑器

参考链接 

https://blog.csdn.net/qq_31915745/article/details/103435405

 

import React, { Component } from 'react';
import WangEditors from 'wangeditor';
import { Collapse,Button, Card, Col, DatePicker, Divider, Form, Icon, Input, Modal, Radio, Row, Select, Spin, Checkbox, Upload,message,Steps} from "antd";


export default class WangEditor extends Component {
    constructor(props) {
        super(props);
        this.btOk = this.btOk.bind(this);
      }
    state={editorContent:{}}
    componentDidMount() {
        // const { value} = this.props;
        const editor = new WangEditors(this.node);
        editor.config.onchange = html => {
            // 传递html editor.txt.html()
            this.onChange(html);// 当编辑器内容改变时
           
        };
        // editor.customConfig.uploadImgShowBase64 = true; // 图片base64    
        editor.create();
        // 设置初始内容
        // editor.txt.html();

        // const editor002 = new WangEditors(this.node002);
        // editor002.create();
    }
    onChange(element){
        this.setState({
            editorContent: element// 存到state里面
        });
        
    }
    btOk(){
        console.log(this.state.editorContent)
        debugger

        const editor002 = new WangEditors(this.node002);
        editor002.create();
        editor002.txt.html(this.state.editorContent);
    }
    render() {
        const { editorContent } = this.state; // 把值传给父组件
        return (
            <div>
                <div onClick={()=>{this.props.getData(editorContent);}} ref={node => this.node = node} />
                <div>
                    <Button onClick={this.btOk}>
                        co
                    </Button>
                </div>
                <div onClick={()=>{this.props.getData(editorContent);}} ref={node002 => this.node002 = node002} />
            </div>
        );
    }
}