Ant design pro常用(11):富文本编辑器

1.安装组件

npm i wangeditor --save

2.组件使用

import  Editor from 'wangeditor'
class OperateComponent extends Component{
	editorRef = React.createRef();//创建对象
	state={ 
          answer:undefined
      };
      componentDidMount(){
        this.initEditor();
      };
        //初始化
    initEditor(){
	        this.editor = new Editor(this.editorRef.current);
	        this.editor.config.onchange=(newHtml)=>{
	            this.setState({answer:newHtml});//属性赋值
	        };
	        this.editor.config.onchangeTimeout = 500;
	        this.editor.create()
    };
     render(){
        return (
            <Form>
                 <Form.Item  label={
                 							<span>
                 								<Text style={{color:'red'}}>*</Text>内容
                 							</span>
                 					} >
                        <div ref={this.editorRef}></div> 
                 </Form.Item>
            </Form>
        )
    }
}