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

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 回调可以实时返回当前值 及时存储

​