react中使用富文本框

安装：
使用npm安装
npm install braft-editor --save

富文本框页：

// 富文本框引入
import React from 'react'
import BraftEditor from 'braft-editor'// 引入编辑器组件
import 'braft-editor/dist/index.css'// 引入编辑器样式
interface Props {
  hospitalNote: any;
  hospitalNoteChange: any
}
export default class EditorDemos extends React.Component<Props, any>{
  state = {
    // 创建一个空的editorState作为初始值
    editorState: this.props.hospitalNote ? BraftEditor.createEditorState(this.props.hospitalNote) : BraftEditor.createEditorState(null)
  }
  async componentDidMount() {
    setTimeout(() => {
      this.setState({
        editorState: BraftEditor.createEditorState(this.props.hospitalNote),
      })
    }, 1000)
  }
  submitContent = async () => {
    // 在编辑器获得焦点时按下ctrl+s会执行此方法
    // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
    const htmlContent = this.state.editorState.toHTML()
  }
  // 富文本框输入触发的函数，这里可以拿到富文本框输入的值
  handleChange = (editorState) => {
    this.setState({
      editorState: editorState,
      outputHTML: editorState.toHTML()
    })
    this.props.hospitalNoteChange(editorState.toHTML())
  }

  render() {
    const { editorState } = this.state
    return (
      <div className="my-component">
        <BraftEditor
          value={editorState}
          onChange={this.handleChange}
          onSave={this.submitContent}
        />
      </div>
    )
  }
}

引用页面调用代码：

import React from 'react';
import { withRouter } from 'dva/router';
import { Table, Form, } from 'antd';
import EditorDemos from './EditorDemos';
interface Props {
  hospitalInformation: any;
  form: any;
}

class hospitalInformation extends React.PureComponent<Props, any> {
  constructor(props) {
    super(props);
    this.state = {
      hospitalNote: '',//富文本框内的值
    }
  }
  hospitalNoteChange = (val) => {//富文本框内容改变
    this.setState({ hospitalNote: val })
  }

  render() {
    return (
      <div style={{ marginLeft: '6%', width: '88%', border: '1px solid #000' }}>
        <EditorDemos hospitalNote={this.state.hospitalNote} hospitalNoteChange={(val) => this.hospitalNoteChange(val)}></EditorDemos>
      </div>
    )
  }
}
export default withRouter(Form.create()(hospitalInformation));

连接： 

配置文档

官方文档