1. 编辑功能

我们需要在model打开后,判断是否是编辑文章. 根据id获取到文章数据,还需要根据数据类型进行回显, 比如表单,上传组件等. 

  1. // 根据编辑/新增需求 改变modal的title
  2.   const [modelTitle, setModelTitle] = useState<string>('');
  3. useEffect(() => {
  4.     // 弹窗打开,且存在id 则为编辑
  5.     if (isShow && editId) {
  6.       setModelTitle('编辑文章');
  7.       dispatch?.({
  8.         type: `${namespace}/getArticleById`,
  9.         payload: {
  10.           id: editId
  11.         }
  12.       })
  13.     }else if(isShow && !editId){
  14.       setModelTitle('新增文章');
  15.     }
  16.   }, [isShow]);
  18. // 这里用于回显表单内容   
  19. // // 如果article变化 需要重置form表单
  20.   useEffect(() =>{
  21.     // 为了避免莫名其妙的form 错误
  22.     if(Object.keys(article).length>0){
  23.       // 整理表单数据
  24.       const articleData: ArticleType = {
  25.         ...article,
  26.         isShow: article.isShow?1:0
  27.       }
  28.       // 设置其他内容
  29.       setEditorState(BraftEditor.createEditorState(article.content1))
  30.       // 设置form表单
  31.       form.setFieldsValue({...articleData});
  32.     }
  33.   },[article]);
  35. // 上传组件的回显
  36. const FormUploadFC: React.FC<UploadPropsType> = ({value, onChange }) => {
  37.     const [fileList, setFileList] = useState<UploadFile[]>([]);
  38.   // 随便定义一个符合UploadFile类型的对象,只需要url内容正常,即可显示
  39.   useEffect(()=>{
  40.       const theFile = [{
  41.       uid: '2',
  42.       name: 'yyy.png',
  43.       status: 'done',
  44.       url: value,
  45.     }]
  46.     setFileList(theFile)
  47.   },[value])
  1. <Modal width="60%" title={modelTitle} visible={isShow} onOk={handleOk} onCancel={handleCancel}>
  2. // 提交事件根据编辑 添加editId
  3. const handleOk = () => {
  4.     form
  5.       .validateFields()
  6.       .then(() => {
  7.         ...
  8.         // 封装提交数据
  9.         const articleData = {
  10.           ...v,
  11.           isShow: v.isShow ? 1 : 0,
  12.           content1: htmlStr,
  13.           content2: htmlStr,
  14.           editorType: 0, // 编辑器类型 默认富文本,写死
  15.         };
  16.         if(editId){
  17.           articleData.id = editId;
  18.         }
  19.                 ...
  20.   };

2. 提交更新

由于model中的effect把新增和编辑合并到一个方法, 提交只需要dispatch同一个effect即可,差别在于新增没有id,而编辑存在id:

  1. effects: {
  2.     *saveArticle({ payload }, { call }) {
  3.       // 成功后为了通知组件 这里添加了callback的回调函数
  4.       const { article, callback } = payload;
  5.       // 如果有id则为编辑,否则为新增. 这个和vue乐居商城逻辑一样.
  6.       const saveOrUpdateApi = article.id ? updateArticleApi : addArticleApi;
  7.       const { success, message: errMsg } = yield call(saveOrUpdateApi, article);
  8.       if (success) {
  9.         message.success('保存成功!');
  10.         if (callback && typeof callback === 'function') {
  11.           callback();
  12.         }
  13.       } else {
  14.         message.error(errMsg);
  15.       }
  16.     },
  17. ...

2. 富文本插入图片

自定义工具栏: 参考文档
通过自定义上传功能,实现用and组件上传并插入富文本功能.
注意事项:

  • 依赖库 braft-utils 没有提供ts版本,所以无法直接import引入
  • 默认媒体上传组件,会把图片转换为base64,不符合实际需求
  • 需要手动集成上传按钮,根据接口实现业务逻辑

image.png

  1. import 'braft-editor/dist/index.css'
  2. import React from 'react'
  3. import BraftEditor from 'braft-editor'
  4. // 因为无法直接import 使用require引入
  5. const {ContentUtils} = require('braft-utils');
  7. export default class CustomDemo extends React.Component {
  9.   render () {
  10.        ...
  11.   // 自定义富文本工具栏
  12.   const controls: ControlType[] = ['bold', 'italic', 'underline', 'text-color', 'separator', 'link', 'separator','media']
  13.   // 自定义上传按钮
  14.   const extendControls: ExtendControlType[] = [
  15.     {
  16.       key: 'antd-uploader',
  17.       type: 'component',
  18.       component: (
  19.         <Upload
  20.           action="/lejuAdmin/material/uploadFileOss"
  21.           accept="image/*"
  22.           headers={{
  23.             token: getToken() || '',
  24.           }}
  25.           showUploadList={false}
  26.           onChange={({ file, fileList: files }: { file: UploadFile; fileList: UploadFile[] }) => {
  27.             // clone数组,然后只需要一个
  28.             let nowFiles = [...files];
  29.             nowFiles = nowFiles.slice(-1);
  30.             const { status, response } = file;
  31.             if (status === 'done') {
  32.               // 获取上传成功的回调结果
  33.               const { success, data, message: err } = response;
  34.               if (success) {
  35.                 message.success(`${file.name} 上传成功!`);
  36.                 // 避免因直接修改实参造成的报错
  37.                 if (nowFiles.length > 0) {
  38.                   nowFiles[0].url = data.fileUrl;
  39.                   // 设置上传回调地址到富文本内容 
  40.                   setEditorState(
  41.                     ContentUtils.insertMedias(editorState, [{
  42.                       type: 'IMAGE',
  43.                       url: data.fileUrl
  44.                     }])
  45.                   )
  46.                 }
  47.               } else {
  48.                 message.error(err);
  49.               }
  50.             } else if (status === 'error') {
  51.               message.error(`${file.name} file upload failed.`);
  52.             }
  54.           }}
  55.         >
  56.           {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
  57.           <button type="button" className="control-item button upload-button" data-title="插入图片">
  58.             上传图片
  59.           </button>
  60.         </Upload>
  61.       )
  62.     }
  63.   ]
  65.     return (
  66.       <div className="editor-wrapper">
  67.         <BraftEditor
  68.           style={{ border: '1px solid #e5e5e5' }}
  69.           value={editorState}
  70.           onChange={debounce(handleEditorChange, 500)}
  71.           onSave={submitContent}
  72.           controls={controls}
  73.           extendControls={extendControls}
  74.         />
  75.       </div>
  76.     )
  78.   }
  80. }

3. 问题

代码过于臃肿,能否抽离部分功能,单独封装为组件?
src\pages\content\Article\components\ArticleEdit.tsx

  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 } from 'umi';
  5. // 引入富文本依赖
  6. import BraftEditor from 'braft-editor';
  7. import 'braft-editor/dist/index.css';
  8. // 防抖函数 提高富文本性能
  9. import { debounce } from 'lodash';
  10. // 获取token
  11. import { getToken } from '@/utils/myAuth';
  12. import { connect } from 'umi';
  13. // 根据提示找到文件类型的位置 手动引入
  14. import type { UploadFile } from 'antd/lib/upload/interface';
  15. import type {EditorState,ControlType,ExtendControlType} from 'braft-editor/index';
  16. // 因为无法直接import 使用require引入
  17. const {ContentUtils} = require('braft-utils');
  19. const { TextArea } = Input;
  20. const namespace = 'articleEdit';
  21. type PropsType = {
  22.   isShow: boolean;
  23.   setIsShow: any;
  24.   editId?: string;
  25.   dispatch?: Dispatch;
  26.   refresh?: any;
  27.   article: ArticleType
  28. };
  29. type UploadPropsType = {
  30.   value?: string;
  31.   onChange?: (value: string) => void;
  32. };
  34. // 局部组件 自定义formItem组件
  35. // # https://ant.design/components/form-cn/#components-form-demo-customized-form-controls
  36. const FormUploadFC: React.FC<UploadPropsType> = ({value, onChange }) => {
  38.   const [fileList, setFileList] = useState<UploadFile[]>([]);
  39.   // 随便定义一个符合UploadFile类型的对象,只需要url内容正常,即可显示
  40.   useEffect(()=>{
  41.       const theFile = [{
  42.       uid: '2',
  43.       name: 'yyy.png',
  44.       status: 'done',
  45.       url: value,
  46.       size: 0,
  47.     }]
  48.     setFileList(theFile)
  49.   },[value])
  50.   return (
  51.     <Upload
  52.       action="/lejuAdmin/material/uploadFileOss"
  53.       listType="picture"
  54.       fileList={fileList}
  55.       headers={{
  56.         token: getToken() || '',
  57.       }}
  58.       // 用于移除文件后 对表单的校验同步
  59.       onRemove={() => {
  60.         onChange?.('');
  61.         return true;
  62.       }}
  63.       // # https://ant.design/components/upload-cn/#API
  64.       onChange={({ file, fileList: files }: { file: UploadFile; fileList: UploadFile[] }) => {
  65.         // clone数组,然后只需要一个
  66.         let nowFiles = [...files];
  67.         nowFiles = nowFiles.slice(-1);
  68.         const { status, response } = file;
  69.         if (status === 'done') {
  70.           // 获取上传成功的回调结果
  71.           const { success, data, message: err } = response;
  72.           if (success) {
  73.             message.success(`${file.name} 上传成功!`);
  74.             // 避免因直接修改实参造成的报错
  75.             if (nowFiles.length > 0) {
  76.               nowFiles[0].url = data.fileUrl;
  77.               onChange?.(data.fileUrl);
  78.             }
  79.           } else {
  80.             message.error(err);
  81.           }
  82.         } else if (status === 'error') {
  83.           message.error(`${file.name} file upload failed.`);
  84.         }
  85.         // # https://github.com/ant-design/ant-design/issues/2423
  86.         setFileList(nowFiles);
  87.       }}
  88.     >
  89.       <Button icon={<UploadOutlined />}>Upload</Button>
  90.     </Upload>
  91.   );
  92. };
  94. // 默认到处组件
  95. const ArticleEdit: React.FC<PropsType> = (props) => {
  96.   const { isShow, setIsShow, editId, dispatch, refresh, article} = props;
  98.   const [form] = Form.useForm();
  99.   // // 初始化富文本内容state
  100.   // const [content, setContent] = useState<string>('');
  101.   // 给富文本添加关联值
  102.   const [editorState,setEditorState] = useState<EditorState>(null);
  103.   // 根据编辑/新增需求 改变modal的title
  104.   const [modelTitle, setModelTitle] = useState<string>('');
  105.   useEffect(() => {
  106.     // 弹窗打开,且存在id 则为编辑
  107.     if (isShow && editId) {
  108.       setModelTitle('编辑文章');
  109.       dispatch?.({
  110.         type: `${namespace}/getArticleById`,
  111.         payload: {
  112.           id: editId
  113.         }
  114.       })
  115.     }else if(isShow && !editId){
  116.       setModelTitle('新增文章');
  117.     }
  118.   }, [isShow]);
  119.   // // 如果article变化 需要重置form表单
  120.   useEffect(() =>{
  121.     // 为了避免莫名其妙的form 错误
  122.     if(Object.keys(article).length>0){
  123.       // 整理表单数据
  124.       const articleData: ArticleType = {
  125.         ...article,
  126.         isShow: article.isShow?1:0
  127.       }
  128.       // 设置其他内容
  129.       setEditorState(BraftEditor.createEditorState(article.content1))
  130.       // 设置form表单
  131.       form.setFieldsValue({...articleData});
  132.     }
  133.   },[article]);
  135.   /**
  136.    *
  137.    * @param v
  138.    */
  139.   const handleEditorChange = (v: EditorState) => {
  140.     setEditorState(v);
  141.   };
  142.   /**
  143.    * ctrl+s 自动保存触发
  144.    * @param v
  145.    */
  146.   const submitContent = (v: EditorState) => {
  147.     setEditorState(v);
  148.   };
  150.   const cb = () => {
  151.     // 1.关闭弹窗 清除校验
  152.     setIsShow(false);
  153.     form.resetFields();
  154.     // 2.刷新父类列表
  155.     refresh();
  156.   };
  157.   const handleOk = () => {
  158.     form
  159.       .validateFields()
  160.       .then(() => {
  161.         // 获取表单数据
  162.         const v = form.getFieldsValue();
  163.         // 获取富文本转换的html
  164.         const htmlStr = editorState.toHTML();
  165.         // 封装提交数据
  166.         const articleData = {
  167.           ...v,
  168.           isShow: v.isShow ? 1 : 0,
  169.           content1: htmlStr,
  170.           content2: htmlStr,
  171.           editorType: 0, // 编辑器类型 默认富文本,写死
  172.         };
  173.         if(editId){
  174.           articleData.id = editId;
  175.         }
  177.         if (dispatch) {
  178.           // // 提交
  179.           dispatch({
  180.             type: `${namespace}/saveArticle`,
  181.             payload: {
  182.               article: articleData,
  183.               callback: cb,
  184.             },
  185.           });
  186.         }
  187.       })
  188.       .catch(() => {
  189.         message.error('请注意表单验证!');
  190.       });
  191.   };
  192.   const handleCancel = () => {
  193.     setIsShow(false);
  194.   };
  196.   const controls: ControlType[] = ['bold', 'italic', 'underline', 'text-color', 'separator', 'link', 'separator','media']
  197.   const extendControls: ExtendControlType[] = [
  198.     {
  199.       key: 'antd-uploader',
  200.       type: 'component',
  201.       component: (
  202.         <Upload
  203.           action="/lejuAdmin/material/uploadFileOss"
  204.           accept="image/*"
  205.           headers={{
  206.             token: getToken() || '',
  207.           }}
  208.           showUploadList={false}
  209.           onChange={({ file, fileList: files }: { file: UploadFile; fileList: UploadFile[] }) => {
  210.             // clone数组,然后只需要一个
  211.             let nowFiles = [...files];
  212.             nowFiles = nowFiles.slice(-1);
  213.             const { status, response } = file;
  214.             if (status === 'done') {
  215.               // 获取上传成功的回调结果
  216.               const { success, data, message: err } = response;
  217.               if (success) {
  218.                 message.success(`${file.name} 上传成功!`);
  219.                 // 避免因直接修改实参造成的报错
  220.                 if (nowFiles.length > 0) {
  221.                   nowFiles[0].url = data.fileUrl;
  222.                   setEditorState(
  223.                     ContentUtils.insertMedias(editorState, [{
  224.                       type: 'IMAGE',
  225.                       url: data.fileUrl
  226.                     }])
  227.                   )
  228.                 }
  229.               } else {
  230.                 message.error(err);
  231.               }
  232.             } else if (status === 'error') {
  233.               message.error(`${file.name} file upload failed.`);
  234.             }
  236.           }}
  237.         >
  238.           {/* 这里的按钮最好加上type="button"，以避免在表单容器中触发表单提交，用Antd的Button组件则无需如此 */}
  239.           <button type="button" className="control-item button upload-button" data-title="插入图片">
  240.             上传图片
  241.           </button>
  242.         </Upload>
  243.       )
  244.     }
  245.   ]
  248.   return (
  249.     <Modal width="60%" title={modelTitle} visible={isShow} onOk={handleOk} onCancel={handleCancel}>
  250.       <Form
  251.         form={form}
  252.         initialValues={{
  253.           isShow: true,
  254.         }}
  255.         labelCol={{
  256.           span: 4,
  257.         }}
  258.         wrapperCol={{
  259.           span: 20,
  260.         }}
  261.       >
  262.         <Form.Item label="标题" rules={[{ required: true, message: '标题不能为空!' }]} name="title">
  263.           <Input placeholder="请输入文章标题"></Input>
  264.         </Form.Item>
  265.         <Form.Item
  266.           label="作者"
  267.           rules={[{ required: true, message: '作者不能为空!' }]}
  268.           name="author"
  269.         >
  270.           <Input placeholder="请输入作者"></Input>
  271.         </Form.Item>
  272.         <Form.Item label="文章概要" name="summary">
  273.           <TextArea></TextArea>
  274.         </Form.Item>
  275.         <Form.Item label="文章显示" name="isShow" valuePropName="checked">
  276.           <Switch checkedChildren="显示" unCheckedChildren="隐藏" defaultChecked></Switch>
  277.         </Form.Item>
  278.         <Form.Item
  279.           label="上传封面"
  280.           name="coverImg"
  281.           rules={[{ required: true, message: '上传封面图片' }]}
  282.         >
  283.           <FormUploadFC />
  284.         </Form.Item>
  285.         <Form.Item label="编辑内容:"></Form.Item>
  286.         <BraftEditor
  287.           style={{ border: '1px solid #e5e5e5' }}
  288.           value={editorState}
  289.           onChange={debounce(handleEditorChange, 500)}
  290.           onSave={submitContent}
  291.           controls={controls}
  292.           extendControls={extendControls}
  293.         />
  294.       </Form>
  295.     </Modal>
  296.   );
  297. };
  298. type UseStateType = {
  299.   dispatch: Dispatch;
  300.   article: StateType;
  301. }
  303. const mapStateToProps = (state: UseStateType) =>{
  304.   return {
  305.     dispatch: state.dispatch,
  306.     article: state[namespace].article
  307.   }
  308. }
  309. export default connect(mapStateToProps)(ArticleEdit);