技術標籤：React

安裝

yarn add react-draft-wysiwyg

yarn add draftjs-to-html

使用

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