前言
我是歌谣 我有个兄弟 巅峰的时候排名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 回调可以实时返回当前值 及时存储
