React中使用富文本编辑器react-draft-wysiwy

一、安装所用插件

  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

---

更多信息请参考这里：https://jpuri.github.io/react-draft-wysiwyg/#/