（记录笔记7）——7.1 富文本编辑器

7.1 富文本编辑器

富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。

---

一、安装插件

react-draft-wysiwyg： 文本编辑器插件

draftjs-to-html：文本转换为html的插件

yarn add react-draft-wysiwyg draftjs-to-html --save

二、富文本编辑器实现

• pages->rich->index.js： 对应路由/admin/rich

  // src/pages/rich/index.js
  import React from 'react'
  import {Card, Button, Modal} from 'antd'
  import {Editor} from 'react-draft-wysiwyg'
  import draftjs from 'draftjs-to-html'
  import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
  
  export default class RichText extends React.Component{
    state = {
      showRichText: false,
      editorContent: '',
      editorState: ''
    }
    handleClearContent = () => {  //清空文本
      this.setState({
        editorState: ''
      })
    }
    handleGetText = () => {    //获取文本内容
      this.setState({
        showRichText: true
      })
    }
    onEditorStateChange = (editorState) => {   //编辑器的状态
      this.setState({
        editorState
      })
    }
    onEditorChange = (editorContent) => {   //编辑器内容的状态
      this.setState({
        editorContent
      })
    }
    render(){
      const { editorState, editorContent } = this.state;
      return (
        <div>
          <Card>
            <Button type="primary" onClick={this.handleClearContent}>清空内容</Button>
            <Button type="primary" onClick={this.handleGetText} style={{marginLeft: 10}}>获取html文本</Button>
          </Card>
          <Card title="富文本编辑器">
            <Editor
              editorState={editorState}
              onEditorStateChange={this.onEditorStateChange}
              onContentStateChange={this.onEditorChange}
              toolbarClassName="toolbarClassName"
              wrapperClassName="wrapperClassName"
              editorClassName="editorClassName"
            />
          </Card>
          <Modal
            title="富文本"
            visible={this.state.showRichText}
            onCancel={() =>{
              this.setState({
                showRichText: false
              })
            }}
            footer={null}>
            {draftjs(this.state.editorContent)}
          </Modal>
        </div>
      )
    }
  }