富文本编辑器 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}} |
原文地址：https://www.cnblogs.com/reeber/p/10992572.html