React [empty] rich text editor HTML text content acquisition

 Rich Text Editor incoming React

React Import, {from} the Component 'REACT'; 

Import {Card, the Button, the Table, Form1, the Select, the Modal, Message} from 'antd'; 

Import} from {Wrap './style'; 

// content rich text data value

　　{} from EditorState Import 'Draft-JS';
　　　// tag assembly of
　　　　Import} from {Editor 'WYSIWYG-REACT-Draft';
　　// default editor css style
　　　　import 'react-draft-wysiwyg / dist / react-draft -wysiwyg.css';
　　// be set to the html tag
　　　　import draftjs from 'draftjs-to- html';

export default class EditorDemo extends Component{

　　state={}

　　// default submission actions
　　onEditorStateChange = (editorState) => {
　　　　this.setState ({
　　　　　editorState,
　　　　});
　　}
　　// modify commit action
　　onEditorChange: Function = (contentState) => {
　　　　this.setState ({
　　　　contentState,
　　　　});
　　} ;
　　// clear the text editor
　　handleClearContent = () => {
　　　　this.setState ({
　　　　editorState: ''
　　　　})
　　}
　　content into // Get the value from time to time to modify the HTML
　　handleGetText = () => {
　　　　this.setState ({
　　　　showEditorText: to true
　　　　})
　　}

render(){
　　const {editorState} = this.state;
return (
<Wrap>
　　<Card title="操作">
　　　　<Button type="primary" onClick={this.handleClearContent}>清空内容</Button>
　　　　<Button type="primary" onClick={this.handleGetText} >获取Html内容</Button>
　　</Card>
<Card title="富文本编辑器">
<Editor
　　editorState = { editorState }
　　onContentStateChange = {this.onEditorChange}
　　onEditorStateChange = { this.onEditorStateChange }

/>
</Card>
<Modal
　　title='富文本'
　　visible={this.state.showEditorText}
　　onCancel={()=>{
　　this.setState({
　　showEditorText:false
　　})
}}
　　footer={null}
>
　　{draftjs(this.state.contentState)}
</Modal>
</Wrap>
);
}
}

 

------------------------------------------------------------------------------------------------------------------------------------------------------

 Rich text editor to get the HTML conversion 

 Html code string is transferred (with some editor writes the HTML format into the database, the database with this out into HTML code)

dangerouslySetInnerHTML={{__HTML:this.props.String}}