【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代碼)

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