在 React17 中使用富文本编辑器 react-draft-wysiwyg

╰半夏微凉° 2022-10-28 15:22 33阅读 0赞

安装

yarn add react-draft-wysiwyg

yarn add draftjs-to-html

yarn add draft-js

--------------------

使用

import React from 'react'
    import {  Button, Card, Modal } from 'antd'
    import {  Editor } from 'react-draft-wysiwyg'
    // 样式文件
    import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
    // 转化为 html（根据自己的需求添加）
    import draftjs from 'draftjs-to-html'
    
    export default class RichText extends React.Component { 
    
      state = { 
        showRichText: false,
        editorContent: '',
        editorState: '',
      }
    
      handleClearContent = () => { 
        this.setState({ 
          editorState: ''
        })
      }
    
      handleGetText = () => { 
        this.setState({ 
          showRichText: true
        })
      }
     // 内容发生变化时调用此方法
      onEditorChange = (editorContent) => { 
        this.setState({ 
          editorContent
        })
      }
    // 状态发生变化时调用此方法
      onEditorStateChange = (editorState) => { 
        this.setState({ 
          editorState
        })
      }
    
      render() { 
        const {  editorState } = this.state
    
        return (
          <div>
            <Card style={ {  marginTop: 10, paddingTop: 15 }}>
              <Button type="primary" onClick={ this.handleClearContent}>清空内容</Button>
              <Button type="primary" onClick={ this.handleGetText}>获取HTML文本</Button>
            </Card>
            <Card title="富文本编辑器" style={ {  height: 450 }}>
              <Editor
                editorState={ editorState}
                onContentStateChange={ this.onEditorChange}
                onEditorStateChange={ this.onEditorStateChange}
              />
            </Card>
            <Modal
              title="富文本"
              visible={ this.state.showRichText}
              onCancel={ () => { 
                this.setState({ 
                  showRichText: false
                })
              }}
              footer={ null}
            >
              { draftjs(this.state.editorContent)}
            </Modal>
          </div>
        )
      }
    }

![在这里插入图片描述][20210207083104351.gif_pic_center]

[20210207083104351.gif_pic_center]: /images/20221024/0d254d75dfcc4f3ca3e6896b6ff80da5.png