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

 

目录

​​前言​​

​​导语​​

​​解决思路​​

​​总结​​

---

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

歌谣 歌谣 项目中需要使用富文本的编辑器 你有什么推荐吗

编辑

编辑

解决思路

第一步安装依赖

#使用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 });
  };

总结

要点1 处理数据分别用xxx.toHtml（）转化和BraftEditor.createEditorState（xxxx）反转化

要点2 回调可以实时返回当前值 及时存储