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

标签：oda   get   width   ttext   from   height   state   back   ret   

 富文本编辑器  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代码)

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

标签：oda   get   width   ttext   from   height   state   back   ret   

原文地址：https://www.cnblogs.com/reeber/p/10992572.html