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

Posted 2021-12-30 reeber

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