在做后台管理项目的过程中我们少不了和富文本编辑器打交道，以前的项目采用的是ueditor
今天咱们不说ueditor，咱们说一下react用的是：braft-editor
1.安装braft-editor
yarn add braft-editor
npm install braft-editor --save
2.braft-editor的使用
//1.组件中引入 braft-editor
import BraftEditor from 'braft-editor'
//2.constructor中定义 一个字段
constructor(props) {
super(props);
this.state = {
details: null,//富文本回显信息存储
//3.接口请求，将后端会给的富文本框内容放入state的details中
//富文本回显操作setTimeout(() => {
this.props.form.setFieldsValue({
details: BraftEditor.createEditorState(result.details)//接口返回字段
}, 1000);
//4.表单提交的时候，需要把富文本内容格式转化为html格式的
const {form: {validateFields}} = this.props;
validateFields((err, fieldsValue) => {
if (err) {
return;
dispatch({
type: apiUrl,
payload: {
...//其他入参
details: fieldsValue.details.toHTML(),//富文本格式转换
},
callback: data => {
if (data && data.success) {
message.success('操作成功');
that.props.history.goBack();
}
}
})
//5.由于图片上传、视频上传项目中都是单独走的接口，需要一个上传的方法
myUploadFn = (param) => {
// console.log('param',param);
const serverURL = upload;//upload 是接口地址
const xhr = new XMLHttpRequest();
const fd = new FormData();
const successFn = (response) => {
// 假设服务端直接返回文件上传后的地址
// 上传成功后调用param.success并传入上传后的文件地址
//console.log('response', response.currentTarget);
//console.log('xhr.responseText', xhr.responseText);
const upLoadObject = JSON.parse(response && response.currentTarget && response.currentTarget.response);
param.success({
url: JSON.parse(xhr.responseText).data.fileUrl,
meta: {
id: upLoadObject && upLoadObject.id,
title: upLoadObject && upLoadObject.fileName,
alt: upLoadObject && upLoadObject.fileName,
loop: false, // 指定音视频是否循环播放
autoPlay: false, // 指定音视频是否自动播放
controls: false, // 指定音视频是否显示控制栏
poster: '', // 指定视频播放器的封面
}
const progressFn = (event) => {
// 上传进度发生变化时调用param.progress
param.progress(event.loaded / event.total * 100)
const errorFn = (response) => {
// 上传发生错误时调用param.error
param.error({
msg: 'unable to upload.'
xhr.upload.addEventListener("progress", progressFn, false);
xhr.addEventListener("load", successFn, false);
xhr.addEventListener("error", errorFn, false);
xhr.addEventListener("abort", errorFn, false);
fd.append('file', param.file);
xhr.open('POST', serverURL, true);
xhr.setRequestHeader("X-Auth-Token", User.getToken());//header中token的设置
xhr.send(fd)
//6.render函数中 braft-editor的使用（验证必填项）
labelCol={{span: 3}} wrapperCol={{span: 19}} {getFieldDecorator('details', { validateTrigger: 'onBlur', rules: [{ required: true, validator: (_, value, callback) => { if (value.isEmpty()) { callback('请输入正文内容') } else { callback() } className="my-editor" placeholder="请输入正文内容" media={{uploadFn: this.myUploadFn}} /> ps: 如果是上传视频的话目前braft-editor这个版本只支持mp4,且编码是H264。 因为chrome浏览器和一些手机浏览器对video只识别这个编码格式的 上传时候先要对视频格式进行转换 Adapter：https://macroplant.com/adapter qq影音：https://player.qq.com/ 3.富文本最大输入多少字符 在使用braft-editor的时候，针对他开发了一个扩展的库 braft-extensions npm install braft-extensions --save import BraftEditor from 'braft-editor' import MaxLength from 'braft-extensions/dist/max-length' const options = { defaultValue: 20000, // 指定默认限制数，如不指定则为Infinity(无限) BraftEditor.use(MaxLength(options)); labelCol={{span: 3}} wrapperCol={{span: 19}} {getFieldDecorator('details', { validateTrigger: 'onBlur', rules: [{ required: true, validator: (_, value, callback) => { if (value.isEmpty()) { callback('请输入正文内容') } else { callback() } className="my-editor" placeholder="请输入正文内容" media={{uploadFn: this.myUploadFn}} maxLength={20000} onReachMaxLength={this.handleMaxLength} /> handleMaxLength = () => { // console.log(1111); message.info('最多只能输入2000个字符') }; 作者：SunnyFanFan
