antdIt is a high-quality React component library implemented based on the Ant Design design specification. It tends to only provide UI components that conform to the specification and have visual presentation, and try not to reinvent the wheel as much as possible.
If you want to use a rich text editor in a React project, it is officially recommended to use react-quilland braft-editor.
Click here for details
This article mainly Braft Editorintroduces Antdthe combination of and .
Install
Use npm or yarn to add this editor to your project:
# 使用npm安装
npm install braft-editor --save
# 使用yarn安装
yarn add braft-editor
Used in Ant Design form
Features
BraftEditor.createEditorStateCreate editorState usingeditorState.toHTML()Get html using realtime- Use
editorState.isEmpty()the null check
Precautions
- The data format of the editor component is editorState, so when calling setFieldsValue and before submitting, corresponding conversion (toHTML()) is required
- For empty value verification, you need to customize the validator and verify it through value.isEmpty(), value is an editorState
- The validation timing of the editor component needs to be changed to onBlur to avoid unexpected validation prompts and unnecessary performance overhead
- The value property of the editor must be an editorState object
- In actual use, please avoid direct toHTML in onChange, it is more appropriate to cooperate with the throttling function or use it at the right time
editor demo
null check
Using isEmpty()validation, the code in rules is as follows:
rules={
[
{
required: true,
validator: (rule, value) => {
if (value.isEmpty()) {
return Promise.reject('请输入正文内容')
} else {
return Promise.resolve()
}
}
}
]}
sample source code
The editor supports valueand onChangeattributes, which are similar to the native input components in React.
In general, the editor can be used in the form of a typical controlled component
Part of the code is as follows:
import BaseCmp from '@components/BaseCmp.js'
import {
connect } from 'react-redux'
import {
RLInput, RLButton, RLForm, RLFormItem
} from '@components/index.js'
import {
DatePicker } from 'antd'
import {
createRef } from 'react'
import BraftEditor from 'braft-editor'
import actionInfoManage from '@actions/infoManage/actionInfoManage.js'
import {
dealTime, dealDateTime } from '@/libs/utils.js'
import moment from 'moment'
import locale from 'antd/es/date-picker/locale/zh_CN'
class CmpInfoEdit extends BaseCmp {
constructor(props) {
super(props)
this.state = {
infoListInfo: {
title: '',
start_time: '',
// 创建一个空的editorState作为初始值
content: BraftEditor.createEditorState(null)
}
}
this.form = createRef()
}
componentDidMount() {
}
render() {
return (
<div className='page-info-edit'>
<RLForm
ref={
form => this.form = form}
labelCol={
{
style: {
width: 150, marginRight: 20, textAlign: 'right' } }}
labelAlign='left'
wrapperCol={
{
style: {
span: 24, marginRight: 30 } }}
onFinish={
this.editConfirm}
onFinishFailed={
this.editFailed}
initialValues={
this.state.infoListInfo}
validateTrigger='onBlur'
>
<RLFormItem
name='content'
label='正文内容'
colon={
false}
rules={
[
{
required: true,
validator: (rule, value) => {
if (value.isEmpty()) {
return Promise.reject('请输入正文内容')
} else {
return Promise.resolve()
}
}
}
]}
>
<BraftEditor
value={
this.state.infoListInfo.content}
onChange={
editorState => {
this.setState({
infoListInfo: {
...this.state.infoListInfo,
content: editorState
}
})
}}
media={
{
accepts: {
image: 'image/jpeg,image/png',
video: 'video/mp4',
audio: 'audio/mpeg,audio/mp3',
},
uploadFn: (upload) => {
},
// onChange(...rest) {
// console.log('onChange---rest', rest)
// }
}}
style={
{
border: '1px solid #d1d1d1', borderRadius: 3, background: '#fff' }}
/>
</RLFormItem>
</RLForm>
</div>
)
}
}
export default connect((store, props) => {
return {
...props
}
})(CmpInfoEdit)