一、安裝所用插件

  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、相關(guān)依賴說明：

• draftjs-to-html 獲取編輯器html內(nèi)容
• html-to-draftjs 將html內(nèi)容轉(zhuǎn)為編輯器顯示內(nèi)容
• draftjs-to-markdown 獲取編輯框得內(nèi)容

2、相關(guān)代碼：

import React,{Component} from 'react'
import {Card,Button,Modal} from 'antd'
//引入相關(guān)組件
import {convertToRaw,EditorState} from 'draft-js'
import {Editor} from 'react-draft-wysiwyg'
import draftToHtml from 'draftjs-to-html' //獲取編輯器html內(nèi)容
import htmlToDraft from 'html-to-draftjs' //將html內(nèi)容轉(zhuǎn)為編輯器顯示內(nèi)容
import draftToMarkdown from 'draftjs-to-markdown' //獲取編輯框得內(nèi)容
//引入樣式
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'

export default class RichText extends Component {
    state = {
        // editorState:  EditorState.createEmpty(),//創(chuàng)建一個空得富文本
        editorState: '',//創(chuàng)建一個空得富文本
        isShowHtml: false,//是否顯示獲取得html內(nèi)容模態(tài)框
        isShowJson: false,//是否顯示獲取得json內(nèi)容模態(tài)框
        isShowText: false,//是否顯示獲取得text內(nèi)容模態(tài)框
    }
    //編輯器發(fā)上內(nèi)容發(fā)生變化時
    onEditorStateChange = (editorState)=>{
        // console.log(convertToRaw(editorState.getCurrentContent()))
        this.setState({
            editorState
        })
    }
    //獲取內(nèi)容變化值
    onEditorChange = (editorContent) => {
        // console.log(JSON.stringify(editorContent));
        this.setState({
            editorContent
        });
    };
    //清空編輯器內(nèi)容
    handleClearContent = ()=> {
        this.setState({
            editorState: ''
        })
    }
    //獲取html內(nèi)容
    handleGetHtml = ()=>{
        this.setState({
            isShowHtml: true
        })
    }
    //獲取json內(nèi)容
    handleGetJson = ()=>{
        this.setState({
            isShowJson: true
        })
    }
    //獲取json內(nèi)容
    handleGetText = ()=>{
        this.setState({
            isShowText: true
        })
    }
    render(){
        const { editorState, editorContent} = this.state;
        return(
            <div>
                <Card>
                    <Button type="primary" onClick={this.handleClearContent}>清空內(nèi)容</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} //獲取內(nèi)容變化值
                        onEditorStateChange={this.onEditorStateChange}  //編輯器狀態(tài)發(fā)生變化時
                    />
                </Card>
                {/*  模態(tài)框-start  */}
                    <Modal
                        title="富文本html內(nèi)容"
                        visible={this.state.isShowHtml}
                        onCancel={()=>{this.setState({isShowHtml:false})}}
                        footer={null}
                    >
                        {draftToHtml(editorContent)}
                    </Modal>
                    <Modal
                        title="富文本json內(nèi)容"
                        visible={this.state.isShowJson}
                        onCancel={()=>{this.setState({isShowJson:false})}}
                        footer={null}
                    >
                        {JSON.stringify(editorContent, null, 4)}
                    </Modal>
                    <Modal
                        title="富文本text內(nèi)容"
                        visible={this.state.isShowText}
                        onCancel={()=>{this.setState({isShowText:false})}}
                        footer={null}
                    >
                        {editorContent && draftToMarkdown(editorContent)}
                    </Modal>
                {/*  模態(tài)框-end  */}
            </div>
        )
    }
}

3、運(yùn)行截圖：

輸入內(nèi)容 圖3-1

獲取html內(nèi)容 圖3-2

獲取json內(nèi)容 圖3-2

獲取text內(nèi)容 圖3-2

更多信息請參考這里：https://jpuri.github.io/react-draft-wysiwyg/#/