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个字符')
};

 五、参考链接

　　https://www.jianshu.com/p/acb0fc96b259

https://braft.margox.cn/demos/antd-form
https://blog.csdn.net/zuggs_/article/details/80747438
https://github.com/margox/braft-editor
https://github.com/margox/braft-extensions