前言
我是歌谣 我有个兄弟 巅峰的时候排名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 回调可以实时返回当前值 及时存储
————————————————
版权声明：本文为CSDN博主「前端大歌谣」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/geyaoisnice/article/details/122336491
