Ant Design of React 自定义富文本编辑器

前言

咱们在开发后台的过程当中，用antd的组件时，发现其并没有富文本编辑器这个组件，但是业务又需要咱们去使用，这个时候就得自行封装一个使用的组件。
在官方文档的社区精选组件中，就可以找到两个富文本编辑器的组件，本文以及我个人使用的是braft-editor这个组件

安装和使用

插件的官方地址：https://braft.margox.cn/demos/basic

安装

使用npm或者yarn来将本编辑器加入到你的项目中：

# 使用npm安装
npm install braft-editor --save

# 使用yarn安装
yarn add braft-editor

注意：对于传统的scrpt标签引入方式，本项目暂未进行充分测试

使用

编辑器支持value和onChange属性，这类似于React中原生的input组件。通常情况下，可以用典型的受控组件的形式来使用本编辑器：

封装组件，components/Editor 文件夹下创建 index.jsx，内容如下：

import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'

export default class EditorDemo extends React.Component {

    state = {
        // 创建一个空的editorState作为初始值
        // this.props.content接收父组件的值，渲染富文本
        editorState: BraftEditor.createEditorState(this.props.content ?? null)
    }

    handleEditorChange = (editorState) => {
    	// 更新编辑器的状态
        this.setState({ editorState })
        
        // 判断输入的内容，如果有内容，设置输入的内容；如果没有内容，设置为空字符串 ''
	    if (!editorState.isEmpty()) { // 如此判断的原因，因为即使是没有内容 editorState.toHTML() 是一对空标签，不能直接给表单使用。
	      // 可直接调用editorState.toHtml()来获取HTML格式的内容
	      const content = editorState.toHTML()
	      // 调用父组件的函数，将编辑器输入的内容传递回去
	      this.props.setDetails(content)
	    } else {
	      // 调用父组件的函数，没有内容设置成空字符串 ''
	      this.props.setDetails('')
	    }
    }

    render () {
        const { editorState } = this.state
        return (
            <div className="my-component">
                <BraftEditor
                    value={editorState}
                    onChange={this.handleEditorChange}
                />
            </div>
        )
    }

}

表单页面使用

import React, {useState} from 'react';
import ProForm from '@ant-design/pro-form';
import {Modal} from 'antd';
import {infoContent} from '@/services/cms';
import Editor from '@/components/Editor';

const Edit = (props) => {
  const {isModalVisible, isShowModal, editId} = props;

  const [contentData, setContentData] = useState(undefined); // 富文本数据

  // 定义form的实例
  const [formObj] = ProForm.useForm()

  const title = editId === null ? '添加内容' : '编辑内容'

  const getData = async () => {
    const res = await infoContent({
      content_id: editId,
    })
    // 给编辑器赋值
    setContentData(res.data.content)
    return res.data
  }

  /**
   * 提交按钮
   */
  const handleSubmit = async values => {
    const data = values
  }

  // 通过组件传回来的值，设置组件的值
  const setDetails = content => formObj.setFieldsValue({'content': content})

  return (
    <Modal
      title={title}
      visible={isModalVisible}
      onCancel={() => isShowModal(false)}
      footer={null}
      destroyOnClose={true}
      width={750}
    >
      <ProForm
        form={formObj}
        onFinish={values => handleSubmit(values)}
        request={editId == null ? '' : () => getData()}
      >

        <ProForm.Item
          name="content"
          label="详情"
          rules={[
            {required: true, message: '请输入详情'}
          ]}
        >
          <Editor
            setDetails={setDetails}
            content={contentData}
           />
        </ProForm.Item>

      </ProForm>
    </Modal>
  );
};

export default Edit;

小结

• 页面效果
  
• 本文主要是在 Modal 里使用，样式就是默认宽度填充的，如果是在其它场景的话，使用方式是一样的，可以对样式进行简单调整。