插件名稱：braft-editor

在antd中的使用注意事項(xiàng)：
antd版本需要設(shè)置為3.26.14，否則會(huì)報(bào)錯(cuò)

安裝braft-editor插件后的示例代碼

import 'braft-editor/dist/index.css';
import React from 'react';
import BraftEditor from 'braft-editor';
import { Form, Input, Button } from 'antd';

const FormItem = Form.Item;
const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 5 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 12 },
    },
  };
class RichTextPage extends React.Component {

  componentDidMount () {

    // 異步設(shè)置編輯器內(nèi)容
    setTimeout(() => {
      this.props.form.setFieldsValue({
        content: BraftEditor.createEditorState('<p>Hello <b>World!</b></p>')
      })
    }, 1000)

  }

  handleSubmit = (event) => {

    event.preventDefault()

    this.props.form.validateFields((error, values) => {
      if (!error) {
        const submitData = {
          title: values.title,
          content: values.content.toRAW() // or values.content.toHTML()
        }
        console.log(submitData)
      }
    })

  }

  render () {

    const { getFieldDecorator } = this.props.form
    const controls = ['bold', 'italic', 'underline', 'text-color', 'separator', 'link', 'separator', 'media' ] // 富文本菜單選項(xiàng)

    return (
      <div className="demo-container">
        <Form onSubmit={this.handleSubmit}>
          <FormItem {...formItemLayout} label="文章標(biāo)題">
            {getFieldDecorator('title', {
              rules: [{
                required: true,
                message: '請(qǐng)輸入標(biāo)題',
              }],
            })(
              <Input size="large" placeholder="請(qǐng)輸入標(biāo)題"/>
            )}
          </FormItem>
          <FormItem {...formItemLayout} label="文章正文">
            {getFieldDecorator('content', {
              validateTrigger: 'onBlur',
              rules: [{
                required: true,
                validator: (_, value, callback) => {
                  if (value.isEmpty()) {
                    callback('請(qǐng)輸入正文內(nèi)容')
                  } else {
                    callback()
                  }
                }
              }],
            })(
              <BraftEditor
                className="my-editor"
                controls={controls}
                placeholder="請(qǐng)輸入正文內(nèi)容"
              />
            )}
          </FormItem>
          <FormItem {...formItemLayout}>
            <Button size="large" type="primary" htmlType="submit">提交</Button>
          </FormItem>
        </Form>
      </div>
    )

  }

}

export default Form.create({})(RichTextPage);

頁(yè)面效果如下：

富文本.png

其中
可以通過(guò)修改 const controls = ['bold', 'italic', 'underline', 'text-color', 'separator', 'link', 'separator', 'media' ]來(lái)動(dòng)態(tài)顯示富文本菜單
如去掉 'media這一選項(xiàng)核蘸，則菜單欄會(huì)不顯示媒體這一個(gè)按鈕