react使用braft-editor 实现富文本编辑
一、安装
npm install braft-editor --save
yarn add 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的使用（验证必填项） <FormItem labelCol={{span: 3}} wrapperCol={{span: 19}} label='描述' > {getFieldDecorator('details', { validateTrigger: 'onBlur', rules: [{ required: true, validator: (_, value, callback) => { if (value.isEmpty()) { callback('请输入正文内容') } else { callback() } } }] })( <BraftEditor className="my-editor" style={{border: '1px solid #e8e8e8'}} placeholder="请输入正文内容" media={{uploadFn: this.myUploadFn}} /> )} </FormItem>
ps:
如果是上传视频的话目前braft-editor这个版本只支持mp4,且编码是H264，
因为chrome浏览器和一些手机浏览器对video只识别这个编码格式的
上传时候先要对视频格式进行转换
视频格式转换的工具有：
mac推荐
Adapter：https://macroplant.com/adapter
windows推荐
qq影音：https://player.qq.com/
格式化工厂：http://www.pcgeshi.com/
三、效果预览
四、富文本最大输入多少字符
在使用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)); <FormItem labelCol={{span: 3}} wrapperCol={{span: 19}} label='描述' > {getFieldDecorator('details', { validateTrigger: 'onBlur', rules: [{ required: true, validator: (_, value, callback) => { if (value.isEmpty()) { callback('请输入正文内容') } else { callback() } } }] })( <BraftEditor className="my-editor" style={{border: '1px solid #e8e8e8'}} placeholder="请输入正文内容" media={{uploadFn: this.myUploadFn}} maxLength={20000} onReachMaxLength={this.handleMaxLength} /> )} </FormItem> handleMaxLength = () => { // console.log(1111); message.info('最多只能输入2000个字符') };
