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