使用antd+braft-editor+braft-extensions创建带有富文本编辑器的表单
braft-editor 富文本编辑器
最近项目中需要使用富文本编辑器，本身项目是基于react+antd 进行开发的，对比常用的富文本编辑器，发现braft-editor和antd的form表单验证更配。记录一下开发过程，共勉。
常见的开源富文本编辑器比较
Braft Editor 一个基于darft-js开发的Web富文本编辑器,使用参考：
1、使用文档
2、在线演示
3、github
4、表格扩展
代码
import './index.less';
import React from 'react';
import {Card, Form, Input, Row, Col, Select, Button, Upload, Icon, message} from 'antd';
import 'braft-editor/dist/index.css';
import 'braft-extensions/dist/table.css';
import BraftEditor from 'braft-editor';
import Table from 'braft-extensions/dist/table';
import axios from 'axios';
const {Item} = Form;
const {Option} = Select;
export default class Demo extends React.Component{
constructor(props) {
super(props);
this.state ={
isEdit:false
};
}
//创建任务
handleAddSubmit = () => {
this.addFormData.props.form.validateFields((err, value) => {
if (!err) {
let softFunction = [];
value.softFunction.map((item)=>(softFunction.push(item.label)));
const param = {
...value,
scene:value.scene.toHTML(),
attachment:value.attachment?value.attachment.file.response?
value.attachment.file.response.data:null:null,
softFunction:softFunction.join(","),
projectCategory:value.projectCategory.label,
};
axios.post('https://www.easy-mock.com/mock/5bfbf83591ea222a361d8316/rich/task',
{param}).then(res=>{
console.log(res)
})
}
})
};
render() {
const {isEdit} = this.state;
return (
保存
}
title={'创建任务'}>
{isEdit ? null :
this.addFormData = formData}
/>}
);
}
}
/**
* 创建任务的表单
*/
class AddForm extends React.Component {
constructor(props) {
super(props);
this.state = {
scene: '',
fileList: []
};
}
componentDidMount() {
BraftEditor.use(Table());
this.props.form.setFieldsValue({
scene: BraftEditor.createEditorState("")
})
}
beforeUpload = (file) => {
const isLt100M = file.size / 1024 / 1024 < 100;
if (!isLt100M) {
message.error('附件最多不超过100MB!');
}
return isLt100M;
};
handleChange = ({fileList}) => this.setState({fileList});
render() {
const {getFieldDecorator} = this.props.form;
const formItemLayout = {
labelCol: {span: 6},
wrapperCol: {span: 16}
};
const uploadProps = {
name: 'files',
action: 'https://www.easy-mock.com/mock/5bfbf83591ea222a361d8316/rich/file/upload',
multiple: true,
beforeUpload: this.beforeUpload,
onChange: this.handleChange,
fileList: this.state.fileList
};
const uploadButton = (
);
return (
);
}
}
AddForm = Form.create()(AddForm);
效果如下：
代码
https://gitee.com/a2011102394/rich-text-editor.git