富文本组件封装

富文本组件集成上传图片功能,包含大量代码,影响当前组件代码的可读性. 另外考虑富文本可能在任意其他组件使用,所以将富文本集成上传图片功能封装为一个通用组件,方便调用.

创建文件: src\components\CommBraftEditor\index.tsx
封装思路:
1. 当前组件为受控组件
2. 外部可以通过value初始化组件内容
3. 内部可以通过onChange反馈最新值给外部
4. 外部可以自定义插入图片的上传地址
5. 富文本功能组件支持默认和自定义
6. 扩展组件支持默认和自定义

  1. import React,{useEffect, useState} from 'react';
  2. import {message, Upload} from 'antd';
  3. // 引入富文本依赖
  4. import BraftEditor from 'braft-editor';
  5. import 'braft-editor/dist/index.css';
  6. // 根据提示找到文件类型的位置 手动引入
  7. import type { UploadFile } from 'antd/lib/upload/interface';
  8. import type {EditorState,ControlType,ExtendControlType} from 'braft-editor/index';
  9. import {getToken} from '@/utils/myAuth';
  10. import {debounce} from 'lodash';
  11. // 因为无法直接import 使用require引入
  12. const {ContentUtils} = require('braft-utils');
  15. export type PropsT = {
  16.   value?: string;
  17.   onChange?: (v: string) => void;
  18.   uploadAction?: string;
  19.   controls?: ControlType[]; 
  20.   extendControls?: ExtendControlType[];
  21. }
  22. const CommonBraftEditor: React.FC<PropsT> = props =>{
  23.   const {value,uploadAction,onChange,controls:outControls,extendControls:outExtendControls} = props;
  24.    // 给富文本添加关联值
  25.    const [editorState,setEditorState] = useState<EditorState>(null);
  27.   const controls  = outControls|| ['bold', 'italic', 'underline', 'text-color', 'separator', 'link', 'separator','media'];
  29.   const uploadCom: ExtendControlType = {
  30.     key: 'antd-uploader',
  31.     type: 'component',
  32.     component: (
  33.       <Upload
  34.         action={uploadAction}
  35.         accept="image/*"
  36.         headers={{
  37.           token: getToken() || '',
  38.         }}
  39.         showUploadList={false}
  40.         onChange={({ file, fileList: files }: { file: UploadFile; fileList: UploadFile[] }) => {
  41.           // clone数组,然后只需要一个
  42.           let nowFiles = [...files];
  43.           nowFiles = nowFiles.slice(-1);
  44.           const { status, response } = file;
  45.           if (status === 'done') {
  46.             // 获取上传成功的回调结果
  47.             const { success, data, message: err } = response;
  48.             if (success) {
  49.               message.success(`${file.name} 上传成功!`);
  50.               // 避免因直接修改实参造成的报错
  51.               if (nowFiles.length > 0) {
  52.                 nowFiles[0].url = data.fileUrl;
  53.                 setEditorState(
  54.                   ContentUtils.insertMedias(editorState, [{
  55.                     type: 'IMAGE',
  56.                     url: data.fileUrl
  57.                   }])
  58.                 )
  59.               }
  60.             } else {
  61.               message.error(err);
  62.             }
  63.           } else if (status === 'error') {
  64.             message.error(`${file.name} file upload failed.`);
  65.           }
  67.         }}
  68.       >
  69.         {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
  70.         <button type="button" className="control-item button upload-button" data-title="插入图片">
  71.           上传图片
  72.         </button>
  73.       </Upload>
  74.     )
  75.   }
  76.   const extendControls: ExtendControlType[] = [];
  77.   if(uploadAction){
  78.     extendControls.push(uploadCom);
  79.   }
  80.   if(outExtendControls){
  81.     extendControls.concat(outExtendControls);
  82.   }
  83.   /**
  84.    *
  85.    * @param v
  86.    */
  87.    const handleEditorChange = (v: EditorState) => {
  88.     const contentValue = v.toHTML();
  89.     onChange?.(contentValue);
  90.   };
  93.   useEffect(()=>{
  94.     setEditorState(BraftEditor.createEditorState(value));
  95.   },[value])
  96.   return (
  97.     <BraftEditor
  98.           style={{ border: '1px solid #e5e5e5' }}
  99.           value={editorState}
  100.           onChange={debounce(handleEditorChange, 500)}
  101.           onSave={debounce(handleEditorChange, 500)}
  102.           controls={controls}
  103.           extendControls={extendControls}
  104.         />
  105.   )
  106. }
  108. export default CommonBraftEditor;

修改: src\pages\content\Article\components\ArticleEdit.tsx
这里就是简单的引入组件了. 需要注意的是,组件 CommBraftEditor 的onChange回调不能直接修改value属性,会造成死循环!

  1. import React, { useEffect, useState } from 'react';
  2. import { Modal, Button, Form, Input, Switch, Upload, message } from 'antd';
  3. import { UploadOutlined } from '@ant-design/icons';
  4. import type { ArticleType, Dispatch, StateType,Loading } from 'umi';
  6. // 获取token
  7. import { getToken } from '@/utils/myAuth';
  8. import { connect } from 'umi';
  9. // 根据提示找到文件类型的位置 手动引入
  10. import type { UploadFile } from 'antd/lib/upload/interface';
  11. import CommonBraftEditor from '@/components/CommBraftEditor';
  13. import PageLoading from '@/components/PageLoading';
  15. const { TextArea } = Input;
  16. const namespace = 'articleEdit';
  17. type PropsType = {
  18.   isShow: boolean;
  19.   setIsShow: any;
  20.   editId?: string;
  21.   dispatch?: Dispatch;
  22.   refresh?: any;
  23.   article: ArticleType;
  24. };
  25. type UploadPropsType = {
  26.   value?: string;
  27.   onChange?: (value: string) => void;
  28. };
  30. // 局部组件 自定义formItem组件
  31. // # https://ant.design/components/form-cn/#components-form-demo-customized-form-controls
  32. const FormUploadFC: React.FC<UploadPropsType> = ({ value, onChange }) => {
  33.   const [fileList, setFileList] = useState<UploadFile[]>([]);
  34.   // 随便定义一个符合UploadFile类型的对象,只需要url内容正常,即可显示
  35.   useEffect(() => {
  36.     // 避免出现空白文件列表
  37.     if (value) {
  38.       const theFile = [
  39.         {
  40.           uid: '2',
  41.           name: 'yyy.png',
  42.           status: 'done',
  43.           url: value,
  44.         },
  45.       ];
  46.       setFileList(theFile);
  47.     } else {
  48.       setFileList([]);
  49.     }
  50.   }, [value]);
  51.   return (
  52.     <Upload
  53.       action="/lejuAdmin/material/uploadFileOss"
  54.       listType="picture"
  55.       fileList={fileList}
  56.       headers={{
  57.         token: getToken() || '',
  58.       }}
  59.       // 用于移除文件后 对表单的校验同步
  60.       onRemove={() => {
  61.         onChange?.('');
  62.         return true;
  63.       }}
  64.       // # https://ant.design/components/upload-cn/#API
  65.       onChange={({ file, fileList: files }: { file: UploadFile; fileList: UploadFile[] }) => {
  66.         // clone数组,然后只需要一个
  67.         let nowFiles = [...files];
  68.         nowFiles = nowFiles.slice(-1);
  69.         const { status, response } = file;
  70.         if (status === 'done') {
  71.           // 获取上传成功的回调结果
  72.           const { success, data, message: err } = response;
  73.           if (success) {
  74.             message.success(`${file.name} 上传成功!`);
  75.             // 避免因直接修改实参造成的报错
  76.             if (nowFiles.length > 0) {
  77.               nowFiles[0].url = data.fileUrl;
  78.               onChange?.(data.fileUrl);
  79.             }
  80.           } else {
  81.             message.error(err);
  82.           }
  83.         } else if (status === 'error') {
  84.           message.error(`${file.name} file upload failed.`);
  85.         }
  86.         // # https://github.com/ant-design/ant-design/issues/2423
  87.         setFileList(nowFiles);
  88.       }}
  89.     >
  90.       <Button icon={<UploadOutlined />}>Upload</Button>
  91.     </Upload>
  92.   );
  93. };
  95. // 默认到处组件
  96. const ArticleEdit: React.FC<PropsType> = (props) => {
  97.   const { isShow, setIsShow, editId, dispatch, refresh, article } = props;
  99.   const [form] = Form.useForm();
  100.   // 初始化富文本内容state
  101.   const [initContent, setInitContent] = useState<string>('');
  102.   // 使用的content
  103.   const [content, setContent] = useState<string>('');
  104.   // 根据编辑/新增需求 改变modal的title
  105.   const [modelTitle, setModelTitle] = useState<string>('');
  106.   useEffect(() => {
  107.     // 弹窗打开,且存在id 则为编辑
  108.     if (isShow) {
  109.       if (editId) {
  110.         setModelTitle('编辑文章');
  111.         dispatch?.({
  112.           type: `${namespace}/getArticleById`,
  113.           payload: {
  114.             id: editId,
  115.           },
  116.         });
  117.       } else {
  118.         setModelTitle('新增文章');
  119.       }
  120.     } else {
  121.       // 还原表单
  122.       form.resetFields();
  123.       // 清空富文本
  124.       setInitContent('');
  125.     }
  126.   }, [isShow]);
  127.   // // 如果article变化 需要重置form表单
  128.   useEffect(() => {
  129.     // 为了避免莫名其妙的form 错误
  130.     if (Object.keys(article).length > 0) {
  131.       // 整理表单数据
  132.       const articleData: ArticleType = {
  133.         ...article,
  134.         isShow: article.isShow ? 1 : 0,
  135.       };
  136.       // 设置富文本内容
  137.       setInitContent(article.content1 || '');
  138.       // 设置form表单
  139.       form.setFieldsValue({ ...articleData });
  140.     }
  141.   }, [article]);
  143.   const cb = () => {
  144.     // 1.关闭弹窗 清除校验
  145.     setIsShow(false);
  146.     form.resetFields();
  147.     // 清空富文本
  148.     setContent('');
  149.     // 2.刷新父类列表
  150.     refresh();
  151.   };
  152.   const handleOk = () => {
  153.     form
  154.       .validateFields()
  155.       .then(() => {
  156.         // 获取表单数据
  157.         const v = form.getFieldsValue();
  158.         // 封装提交数据
  159.         const articleData = {
  160.           ...v,
  161.           isShow: v.isShow ? 1 : 0,
  162.           content1: content,
  163.           content2: content,
  164.           editorType: 0, // 编辑器类型 默认富文本,写死
  165.         };
  166.         if (editId) {
  167.           articleData.id = editId;
  168.         }
  169.         if (dispatch) {
  170.           // // 提交
  171.           dispatch({
  172.             type: `${namespace}/saveArticle`,
  173.             payload: {
  174.               article: articleData,
  175.               callback: cb,
  176.             },
  177.           });
  178.         }
  179.       })
  180.       .catch(() => {
  181.         message.error('请注意表单验证!');
  182.       });
  183.   };
  184.   const handleCancel = () => {
  185.     setIsShow(false);
  186.   };
  188.   return (
  189.     <Modal width="60%" title={modelTitle} visible={isShow} onOk={handleOk} onCancel={handleCancel}>
  191.         <Form
  192.           form={form}
  193.           initialValues={{
  194.             isShow: true,
  195.           }}
  196.           labelCol={{
  197.             span: 4,
  198.           }}
  199.           wrapperCol={{
  200.             span: 20,
  201.           }}
  202.         >
  203.           <Form.Item
  204.             label="标题"
  205.             rules={[{ required: true, message: '标题不能为空!' }]}
  206.             name="title"
  207.           >
  208.             <Input placeholder="请输入文章标题"></Input>
  209.           </Form.Item>
  210.           <Form.Item
  211.             label="作者"
  212.             rules={[{ required: true, message: '作者不能为空!' }]}
  213.             name="author"
  214.           >
  215.             <Input placeholder="请输入作者"></Input>
  216.           </Form.Item>
  217.           <Form.Item label="文章概要" name="summary">
  218.             <TextArea></TextArea>
  219.           </Form.Item>
  220.           <Form.Item label="文章显示" name="isShow" valuePropName="checked">
  221.             <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked></Switch>
  222.           </Form.Item>
  223.           <Form.Item
  224.             label="上传封面"
  225.             name="coverImg"
  226.             rules={[{ required: true, message: '上传封面图片' }]}
  227.           >
  228.             <FormUploadFC />
  229.           </Form.Item>
  230.           <Form.Item label="编辑内容:"></Form.Item>
  232.           <CommonBraftEditor
  233.             key="1"
  234.             uploadAction="/lejuAdmin/material/uploadFileOss"
  235.             value={initContent}
  236.             onChange={(v) => {
  237.               // initContent仅作为初始化 如果使用initContent作为通知结果 会出现死循环!
  238.               // setInitContent(v);
  239.               setContent(v);
  240.             }}
  241.           />
  242.         </Form>
  244.     </Modal>
  245.   );
  246. };
  247. type UseStateType = {
  248.   dispatch: Dispatch;
  249.   article: StateType;
  250. };
  252. const mapStateToProps = (state: UseStateType) => {
  253.   return {
  254.     dispatch: state.dispatch,
  255.     article: state[namespace].article
  256.   };
  257. };
  258. export default connect(mapStateToProps)(ArticleEdit);

通过富文本组件封装我们学会了通用组件封装的方法,这里和vue基本是一致的.

dva-loading

umijs

  • 内置 dva-loading，直接 connect loading 字段使用即可

经过umijs的合并简化,dva-loading不需要手动集成,直接在connect中即可获取loading字段,我们打印观察:
image.png
我们可以接用dva-loading优化弹窗打开后,由于网络延迟造成的表单填充卡顿问题,提高用户体验:
abc.gif
在 element-ui种我们可以通过v-loading轻松的实现loading效果,在这里我们可以通过 <PageLoading/> 组件来实现:

  1. import PageLoading from '@/components/PageLoading';
  3. ...
  5. const { isShow, setIsShow, editId, dispatch, refresh, article,loading } = props;
  7. return (
  8.     <Modal width="60%"   title={modelTitle} visible={isShow} onOk={handleOk} onCancel={handleCancel}>
  9.       {loading ? (
  10.         <PageLoading />
  11.       ) : (
  12.         <Form
  13.           form={form}
  14.           initialValues={{
  15.             isShow: true,
  16.           }}
  17.           labelCol={{
  18.             span: 4,
  19.           }}
  20.           wrapperCol={{
  21.             span: 20,
  22.           }}
  23.         >
  24.           <Form.Item
  25.             label="标题"
  26.             rules={[{ required: true, message: '标题不能为空!' }]}
  27.             name="title"
  28.           >
  29.             <Input placeholder="请输入文章标题"></Input>
  30.           </Form.Item>
  31.           <Form.Item
  32.             label="作者"
  33.             rules={[{ required: true, message: '作者不能为空!' }]}
  34.             name="author"
  35.           >
  36.             <Input placeholder="请输入作者"></Input>
  37.           </Form.Item>
  38.           <Form.Item label="文章概要" name="summary">
  39.             <TextArea></TextArea>
  40.           </Form.Item>
  41.           <Form.Item label="文章显示" name="isShow" valuePropName="checked">
  42.             <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked></Switch>
  43.           </Form.Item>
  44.           <Form.Item
  45.             label="上传封面"
  46.             name="coverImg"
  47.             rules={[{ required: true, message: '上传封面图片' }]}
  48.           >
  49.             <FormUploadFC />
  50.           </Form.Item>
  51.           <Form.Item label="编辑内容:"></Form.Item>
  53.           <CommonBraftEditor
  54.             key="1"
  55.             uploadAction="/lejuAdmin/material/uploadFileOss"
  56.             value={initContent}
  57.             onChange={(v) => {
  58.               // initContent仅作为初始化 如果使用initContent作为通知结果 会出现死循环!
  59.               // setInitContent(v);
  60.               setContent(v);
  61.             }}
  62.           />
  63.         </Form>
  64.       )}
  65.     </Modal>
  66.   );
  67. // 增加dva-loading
  68. const mapStateToProps = (state: UseStateType) => {
  69.   return {
  70.     dispatch: state.dispatch,
  71.     article: state[namespace].article,
  72.     loading: state.loading.effects[`${namespace}/getArticleById`]
  73.   };
  74. };
  75. ...

添加loading后,是不是舒服多了^_^
abc.gif

总结

学到这里,相信同学已经基本掌握了基于ts+react-antd-pro项目的常规功能开发.
通过本教程的学习,可以在已经掌握vue技术栈的基础上用尽量短的时间迅速展开react+antd项目开发.
本教程到此先告一段落,接下来暂时考虑加入:

  • 动态权限 按钮权限
  • 复杂组件
  • 大屏报表