#yyds干货盘点 【React工作记录二十九】react中使用的富文本编辑器braft-editor使用

#使用yarn安装     yarn add braft-editor
 #使用npm安装    npm install braft-editor --save

import React, { Component } from 'react'
import BraftEditor from 'braft-editor';
import 'braft-editor/dist/index.css';
//音频接口方法
import { xxxxx } from '@/services/common/upload';
class BaseRichText extends Component {
  myUploadFn = async (parame) => {
    const { dispatch, handleFetchUrl } = this.props;
    const formData = new FormData();
    formData.append('file', parame.file);
    formData.append('fileCode', 'PIC');
    const res = await xxxxx(formData);
    parame.success({
      url: res.data,
      meta: {
        loop: false, // 指定音视频是否循环播放
        autoPlay: false, // 指定音视频是否自动播放
        controls: false, // 指定音视频是否显示控制栏
        // poster: 'http://xxx/xx.png', // 指定视频播放器的封面
      }
    })
  }
  render() {
    const { editorState, handleEditorChange, height = 640, 
style, ...reset } = this.props;
    return (
      <BraftEditor
        value={editorState}
        onChange={handleEditorChange}
        style={style}
        contentStyle={{ height, boxShadow: 'inset 0 1px 3px
 rgba(0,0,0,.1)' }}
        {...reset}
        media={{ uploadFn: this.myUploadFn }}
      />
    );
  }
}
export default BaseRichText;

<BaseRichText height={360} handleEditorChange={this.handleEditorChange} />

handleEditorChange = (editorState) => {
    console.log(editorState, 'editorState');
    this.setState({ activityRule: editorState });
  };