【React】富文本编辑器 清空文本内容 获取HTML

富文本编辑器 React 传入

import React,{Component } from 'react';
import { Card, Button, Table, Form, Select,Modal, message } from 'antd';
import { Wrap } from './style';
// 富文本的 内容数据值

　　import { EditorState } from 'draft-js';

　　　// 组件化标签

　　　　import { Editor } from 'react-draft-wysiwyg';

　　// 默认编辑器的css样式

　　　　import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

　　// 设置 成为 html标签

　　　　import draftjs from 'draftjs-to-html';

export default class EditorDemo extends Component{

　　state={}

　　// 默认提交动作

　　onEditorStateChange = (editorState) => {

　　　　this.setState({

　　　　　editorState,

　　　　});

　　}

　　// 修改提交动作

　　onEditorChange: Function = (contentState) => {

　　　　this.setState({

　　　　contentState,

　　　　});

　　};

　　// 清空文本编辑器

　　handleClearContent = ()=>{

　　　　this.setState({

　　　　editorState:''

　　　　})

　　}

　　// 获取 时时修改后的 内容值 转换为HTML

　　handleGetText = ()=>{

　　　　this.setState({

　　　　showEditorText: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>

);

}

}

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

富文本编辑器 拿到 HTML 进行转换

字符串转移为html代码 (编辑器写入一段带HTML格式的存入了数据库，数据库拿出来用这个转为HTML代码)