在 React17 中使用富文本編輯器 react-draft-wysiwyg

安裝

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>
    )
  }
}