封装富文本编辑器为form表单项

 QuillFormItem

import type { ProFormFieldItemProps } from "@ant-design/pro-form/es/typing";
import type { InputProps, InputRef } from "antd";
import { Col } from "antd";
import { omit } from "lodash";
import ProForm from "@ant-design/pro-form";
import React from "react";
import ReactQuill from ".";

interface LAVAFormFieldItem {
    fieldData: BASE.BaseItem,
    disabled?: boolean
}

interface ItemtypeFormItemProps extends LAVAFormFieldItem {
    value?: string,
    onChange?: (value: string) => void,
}

type IFormSelectDataProps = ProFormFieldItemProps<InputProps, InputRef> & LAVAFormFieldItem;

const QuillItem: React.FC<ItemtypeFormItemProps> = React.memo(({ value, onChange, disabled }) => {
    return <>
        <div style={{ border: '1px solid rgb(204,204,204)' }}>
            <ReactQuill 
                placeholder="请输入..." 
                readOnly={disabled} 
                value={value} 
                onChange={onChange} 
            />
        </div>
    </>
})

const QuillFormItem: React.FC<IFormSelectDataProps> = (props) => {
    return <>
        <Col {...props.colProps}>
            <ProForm.Item {...omit(props, ['fieldProps', 'colProps', 'fieldData'])}>
                <QuillItem disabled={props.disabled} fieldData={props.fieldData} />
            </ProForm.Item>
        </Col>
    </>
}

export default QuillFormItem;

QuillCom

import type { ReactQuillProps } from 'react-quill';
import { omit } from 'lodash';

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

interface IProps extends ReactQuillProps {
    toolbarOptions?: any
}
const QuillCom: React.FC<IProps> = (props) => {
    const toolbarOptions = {
        container: [
            ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
            ["blockquote", "code-block"], // 引用，代码块
            [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
            [{ list: "ordered" }, { list: "bullet" }], // 列表
            [{ script: "sub" }, { script: "super" }], // 上下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            [{ direction: "rtl" }], // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            [{ header: [1, 2, 3, 4, 5, 6, false] }], // 几级标题
            [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
            [{ font: [] }], // 字体
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除字体样式
            ["image", "video"], // 上传图片、上传视频
        ]
    };

    return (
        <ReactQuill
            {...omit(props, ['theme'])}
            modules={{
                toolbar: props.toolbarOptions ? props.toolbarOptions : toolbarOptions
            } || props.modules}
            theme="snow"
            value={props.value}
            onChange={props.onChange}
            style={{ backgroundColor: '#fff', minHeight: 250 }}
        />

    );
};
export default QuillCom;

使用：

return (
    <QuillFormItem
        disabled={data.is_readonly || infoMode}
        key={data.name}
        rules={[required]}
        name={data.name}
        label={data.title}
        fieldData={data}
        fieldProps={fieldProps}
     />
)