一、安装所用插件
yarn add react-draft-wysiwyg
yarn add draft-js
yarn add draftjs-to-html
yarn add html-to-draftjs
yarn add draftjs-to-markdown
or
yarn add react-draft-wysiwyg draft-js draftjs-to-html html-to-draftjs
1、相关依赖说明：
-
draftjs-to-html获取编辑器html内容 -
html-to-draftjs将html内容转为编辑器显示内容 -
draftjs-to-markdown获取编辑框得内容
2、相关代码：
import React,{Component} from 'react'
import {Card,Button,Modal} from 'antd'
//引入相关组件
import {convertToRaw,EditorState} from 'draft-js'
import {Editor} from 'react-draft-wysiwyg'
import draftToHtml from 'draftjs-to-html' //获取编辑器html内容
import htmlToDraft from 'html-to-draftjs' //将html内容转为编辑器显示内容
import draftToMarkdown from 'draftjs-to-markdown' //获取编辑框得内容
//引入样式
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
export default class RichText extends Component {
state = {
// editorState: EditorState.createEmpty(),//创建一个空得富文本
editorState: '',//创建一个空得富文本
isShowHtml: false,//是否显示获取得html内容模态框
isShowJson: false,//是否显示获取得json内容模态框
isShowText: false,//是否显示获取得text内容模态框
}
//编辑器发上内容发生变化时
onEditorStateChange = (editorState)=>{
// console.log(convertToRaw(editorState.getCurrentContent()))
this.setState({
editorState
})
}
//获取内容变化值
onEditorChange = (editorContent) => {
// console.log(JSON.stringify(editorContent));
this.setState({
editorContent
});
};
//清空编辑器内容
handleClearContent = ()=> {
this.setState({
editorState: ''
})
}
//获取html内容
handleGetHtml = ()=>{
this.setState({
isShowHtml: true
})
}
//获取json内容
handleGetJson = ()=>{
this.setState({
isShowJson: true
})
}
//获取json内容
handleGetText = ()=>{
this.setState({
isShowText: true
})
}
render(){
const { editorState, editorContent} = this.state;
return(
<div>
<Card>
<Button type="primary" onClick={this.handleClearContent}>清空内容</Button>
<Button type="primary" onClick={this.handleGetHtml} style={{marginLeft:20}}>获取HTML文本</Button>
<Button type="primary" onClick={this.handleGetJson} style={{marginLeft:20}}>获取JSON文本</Button>
<Button type="primary" onClick={this.handleGetText} style={{marginLeft:20}}>获取TEXT文本</Button>
</Card>
<Card title="富文本编辑器">
<Editor
editorState={editorState}
onContentStateChange={this.onEditorChange} //获取内容变化值
onEditorStateChange={this.onEditorStateChange} //编辑器状态发生变化时
/>
</Card>
{/* 模态框-start */}
<Modal
title="富文本html内容"
visible={this.state.isShowHtml}
onCancel={()=>{this.setState({isShowHtml:false})}}
footer={null}
>
{draftToHtml(editorContent)}
</Modal>
<Modal
title="富文本json内容"
visible={this.state.isShowJson}
onCancel={()=>{this.setState({isShowJson:false})}}
footer={null}
>
{JSON.stringify(editorContent, null, 4)}
</Modal>
<Modal
title="富文本text内容"
visible={this.state.isShowText}
onCancel={()=>{this.setState({isShowText:false})}}
footer={null}
>
{editorContent && draftToMarkdown(editorContent)}
</Modal>
{/* 模态框-end */}
</div>
)
}
}
3、运行截图：
输入内容 图3-1
获取html内容 图3-2
获取json内容 图3-2
获取text内容 图3-2
