Antd is a high-quality React component library based on the Ant Design specification. We prefer to only provide UI components that conform to the specification with visual presentation, and try not to duplicate the wheel.

If you want to use a rich text editor in React projects, react-quill and braft-Editor are officially recommended. Click here for details

This article mainly introduces the combination of Braft Editor and Antd.

Use in Ant Design forms

Function points

  • useBraftEditor.createEditorStateCreate editorState
  • useeditorState.toHTML()Real-time HTML fetch
  • useeditorState.isEmpty()Perform null value verification

Matters needing attention

  • The editor component’s data format is ediorState, for which conversion (toHTML() is required when setFieldsValue is called and before submission)
  • For null validation, you need to define your own validator and validate it with value.isempty (), which is an editorState
  • The validation timing of the editor component needs to be changed to onBlur to avoid unwanted validation prompts and unnecessary performance overhead
  • The value property of the editor must be an editorState object
  • Avoid toHTML in onChange and use it with throttling functions or when appropriate

Editor demo

Null check

Using isEmpty(), the code in rules looks like this:

rules={[
    {
        required: true.validator: (rule, value) = > {
            if (value.isEmpty()) {
                return Promise.reject('Please enter the content of the body')}else {
                return Promise.resolve()
            }
        }
    }
]}
Copy the code

The sample source code

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: ' '.content: BraftEditor.createEditorState(null)}}this.form = createRef()
    }
    componentDidMount() {
        
    }

    disabledDate = (current) = > {
        return current && current < moment().startOf('day')}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='title'
                        label='theme'
                        colon={false}
                        rules={[
                            {
                                required: true.message:'Please enter topic'}, {max: 50.message:'Themes at most50'}]} >
                        <RLInput
                            placeholder='Please enter a topic'
                            style={{ width: 360 }}
                            value={this.state.infoListInfo.title}
                            onChange={e= >{ this.setState({ infoListInfo: { ... this.state.infoListInfo, title: e.target.value } }) }} /></RLFormItem>
                    <RLFormItem
                        name='start_time'
                        label='Release time'
                        colon={false}
                        rules={[
                            {
                                required: true.message:'Please select release time'}]} >
                        <DatePicker
                            allowClear
                            locale={locale}
                            showTime
                            disabledDate={this.disabledDate}
                            format={'YYYY-MM-DD HH:mm'}
                            placeholder='Please select date and time'
                        />
                    </RLFormItem>
                    <RLFormItem
                        name='content'
                        label='Body content'
                        colon={false}
                        rules={[
                            {
                                required: true.validator: (rule.value) = >{if (value.isempty ()) {return promise.reject (' please enter the text ')} 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)
Copy the code