brafteditor防抖_react 富文本编辑器 braft-editor

在做后台管理项目的过程中我们少不了和富文本编辑器打交道，以前的项目采用的是ueditor

今天咱们不说ueditor，咱们说一下react用的是：braft-editor

1.安装braft-editor

# 使用yarn安装

yarn add braft-editor

# 使用npm安装

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, fie