富文本修改

src/app.less

@@ -5,4 +5,4 @@
         align-items: center;
         border-bottom: none;
     }
-}
+}

src/pages/JoinZZ/biddingDocument/edit.tsx

@@ -4,16 +4,34 @@ import {
   ProFormText,
   ProFormDatePicker,
   ProFormTextArea,
+  ProFormDateTimePicker,
 } from '@ant-design/pro-components';
 import { Form, Drawer, Space, Button } from 'antd';
-import ReactQuill from 'react-quill';
+import ReactQuill, { Quill } from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
+// import 'react-quill/dist/quill.bubble.css'
 import { useIntl } from '@umijs/max';
 import { upload } from '@/services/JoinZZ/biddingDocument';
 // import Quill from "quill";
 // import "quill/dist/quill.snow.css";
 import moment from 'moment';
+const SizeStyle = Quill.import('attributors/style/size')
+SizeStyle.whitelist = ['6px','8px','9px','10px','11px','12px','14px', '16px', '18px', '20px','22px','24px','26px','28px', '32px', '36px','48px','72px']
+Quill.register(SizeStyle, true)
 
+var Parchment = Quill.import('parchment');
+
+let config = {
+  scope: Parchment.Scope.INLINE,
+  // 会有下拉框列表
+  whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
+  //可设置成没有下拉框的，但会导致无法清除样式
+  // whitelist: ['1px solid #000000']  
+};
+
+let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
+
+Quill.register(wordBox, true);
 export type BiddingDocumentProps = {
   onCancel: (flag?: boolean, formVals?: any) => void;
   onSubmit: (values: any) => Promise<void>;
@@ -28,15 +46,14 @@ let toolbarOptions = [
   [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标/下标
   [{ 'indent': '-1' }, { 'indent': '+1' }],          // 减少缩进/缩进
   [{ 'direction': 'rtl' }],                         // 文本下划线
-  [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
+  // [{ 'size': ['small', false, 'large', 'huge'] }],  // /用户自定义下拉
+  [{ 'size': ['6px','8px','9px','10px','11px','12px','14px', '16px', '18px', '20px','22px','24px','26px','28px', '32px', '36px','48px','72px']}],
   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
   [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
-  [{ 'font': [] }],
-  [{ 'align': [] }],
-  // [{ 'wordBox': ['20px', '22px', '24px', '26px', '28px', '28px', '30px'] }],
   [{ wordBox: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px'] }],
-  ['clean'],                                         // 清除格式
-
+  // [{ 'font': [] }],
+  [{ 'align': [] }],
+  ['clean'], // 清除格式
 ];
 const modules = {
   toolbar: {
@@ -87,12 +104,13 @@ const BiddingDocumentForm: React.FC<BiddingDocumentProps> = (props) => {
     if(!props.open) return;
     // const { title, content, surface, surfaceUrl, date } = props;
     if(!props.currentRow) return;
-    const { digest, top,key,content,surface,surfaceUrl,date,title,source} = props.currentRow;
+    const { digest, top,key,content,surface,surfaceUrl,date,title,source,createTime} = props.currentRow;
     if (props.currentRow) {
       form.setFieldsValue({
         digest,
         top,
-        key
+        key,
+        createTime
       })
       // if (top) {
       //   setCheckTop(1)
@@ -155,6 +173,7 @@ const BiddingDocumentForm: React.FC<BiddingDocumentProps> = (props) => {
     // console.log('htmlStr----', htmlStr)
     // editor.setContents(content)
     data.date = moment(data.date).format('YYYY-MM-DD');
+    data.createTime = moment(data.createTime).format('YYYY-MM-DD HH:mm:ss');
     if(checkTop){
       data.top = 1;
     }else{
@@ -287,7 +306,13 @@ const BiddingDocumentForm: React.FC<BiddingDocumentProps> = (props) => {
           ]
           }
         />
-         
+        <ProFormDateTimePicker
+          name="createTime"
+          label='发稿时间'
+          fieldProps={{ format: (value) => value.format('YYYY-MM-DD HH:mm:ss') }}
+          labelCol={{ style: { width: 95 } }}
+          rules={[{ required: true }]}
+        />
         <ProFormText
           name="key"
           label='网页关键字'
@@ -314,7 +339,7 @@ const BiddingDocumentForm: React.FC<BiddingDocumentProps> = (props) => {
         }}
         >
           {/* <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div> */}
-          <ReactQuill ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
+          <ReactQuill style={{ width:'70vw' }} ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
         </ProForm.Item>
       </ProForm>
     </Drawer>

src/pages/JoinZZ/biddingDocument/index.less

@@ -1,3 +1,352 @@
 .ant-pro-table-list-toolbar-title{
     display:none;
-}
+}
+
+
+.ql-toolbar {
+  &.ql-snow .ql-picker {
+    &.ql-size {
+      width: 60px;
+
+      & .ql-picker-label::before,
+      .ql-picker-item::before {
+        content: '默认';
+      }
+      & .ql-picker-label[data-value='6px']::before,
+      & .ql-picker-item[data-value='6px']::before {
+        content: '6px';
+      }
+      & .ql-picker-label[data-value='8px']::before,
+      & .ql-picker-item[data-value='8px']::before {
+        content: '8px';
+      }
+      & .ql-picker-label[data-value='9px']::before,
+      & .ql-picker-item[data-value='9px']::before {
+        content: '9px';
+      }
+      & .ql-picker-label[data-value='10px']::before,
+      & .ql-picker-item[data-value='10px']::before {
+        content: '10px';
+      }
+      & .ql-picker-label[data-value='11px']::before,
+      & .ql-picker-item[data-value='11px']::before {
+        content: '11px';
+      }
+
+      & .ql-picker-label[data-value='12px']::before,
+      & .ql-picker-item[data-value='12px']::before {
+        content: '12px';
+      }
+
+      & .ql-picker-label[data-value='14px']::before,
+      & .ql-picker-item[data-value='14px']::before {
+        content: '14px';
+      }
+
+      & .ql-picker-label[data-value='16px']::before,
+      & .ql-picker-item[data-value='16px']::before {
+        content: '16px';
+      }
+
+      & .ql-picker-label[data-value='18px']::before,
+      & .ql-picker-item[data-value='18px']::before {
+        content: '18px';
+      }
+      & .ql-picker-label[data-value='20px']::before,
+      & .ql-picker-item[data-value='20px']::before {
+        content: '20px';
+      }
+      & .ql-picker-label[data-value='22px']::before,
+      & .ql-picker-item[data-value='22px']::before {
+        content: '22px';
+      }
+      & .ql-picker-label[data-value='24px']::before,
+      & .ql-picker-item[data-value='24px']::before {
+        content: '24px';
+      }
+      & .ql-picker-label[data-value='26px']::before,
+      & .ql-picker-item[data-value='26px']::before {
+        content: '26px';
+      }
+      & .ql-picker-label[data-value='28px']::before,
+      & .ql-picker-item[data-value='28px']::before {
+        content: '28px';
+      }
+
+      & .ql-picker-label[data-value='32px']::before,
+      & .ql-picker-item[data-value='32px']::before {
+        content: '32px';
+      }
+      & .ql-picker-label[data-value='36px']::before,
+      & .ql-picker-item[data-value='36px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='48px']::before,
+      & .ql-picker-item[data-value='48px']::before {
+        content: '48px';
+      }
+      & .ql-picker-label[data-value='72px']::before,
+      & .ql-picker-item[data-value='72px']::before {
+        content: '72px';
+      }
+
+      & .ql-picker-item[data-value='6px']::before {
+        font-size: 6px;
+      }
+      & .ql-picker-item[data-value='8px']::before {
+        font-size: 8px;
+      }
+      & .ql-picker-item[data-value='9px']::before {
+        font-size: 9px;
+      }
+      & .ql-picker-item[data-value='10px']::before {
+        font-size: 10px;
+      }
+      & .ql-picker-item[data-value='11px']::before {
+        font-size: 11px;
+      }
+      & .ql-picker-item[data-value='12px']::before {
+        font-size: 12px;
+      }
+      & .ql-picker-item[data-value='14px']::before {
+        font-size: 14px;
+      }
+
+      & .ql-picker-item[data-value='16px']::before {
+        font-size: 16px;
+      }
+
+      & .ql-picker-item[data-value='18px']::before {
+        font-size: 18px;
+      }
+      & .ql-picker-item[data-value='20px']::before {
+        font-size: 20px;
+      }      
+      & .ql-picker-item[data-value='22px']::before {
+        font-size: 22px;
+      }
+      & .ql-picker-item[data-value='24px']::before {
+        font-size: 24px;
+      }
+      & .ql-picker-item[data-value='26px']::before {
+        font-size: 26px;
+      }
+      & .ql-picker-item[data-value='28px']::before {
+        font-size: 28px;
+      }
+
+      & .ql-picker-item[data-value='32px']::before {
+        font-size: 32px;
+      }
+      & .ql-picker-item[data-value='36px']::before {
+        font-size: 36px;
+      }
+      
+      & .ql-picker-item[data-value='48px']::before {
+        font-size: 48px;
+      }
+      & .ql-picker-item[data-value='72px']::before {
+        font-size: 72px;
+      }
+    }
+
+    &.ql-wordBox {
+      width: 60px;
+
+      & .ql-picker-label::before,
+      .ql-picker-item::before {
+        content: '默认';
+      }
+
+      & .ql-picker-label[data-value='20px']::before,
+      & .ql-picker-item[data-value='20px']::before {
+        content: '20px';
+      }
+
+      & .ql-picker-label[data-value='22px']::before,
+      & .ql-picker-item[data-value='22px']::before {
+        content: '22px';
+      }
+
+      & .ql-picker-label[data-value='24px']::before,
+      & .ql-picker-item[data-value='24px']::before {
+        content: '24px';
+      }
+
+      & .ql-picker-label[data-value='26px']::before,
+      & .ql-picker-item[data-value='26px']::before {
+        content: '26px';
+      }
+
+      & .ql-picker-label[data-value='28px']::before,
+      & .ql-picker-item[data-value='28px']::before {
+        content: '28px';
+      }
+
+      & .ql-picker-label[data-value='30px']::before,
+      & .ql-picker-item[data-value='30px']::before {
+        content: '30px';
+      }
+
+      & .ql-picker-label[data-value='32px']::before,
+      & .ql-picker-item[data-value='32px']::before {
+        content: '32px';
+      }
+
+      & .ql-picker-label[data-value='34px']::before,
+      & .ql-picker-item[data-value='34px']::before {
+        content: '34px';
+      }
+
+      & .ql-picker-label[data-value='36px']::before,
+      & .ql-picker-item[data-value='36px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='38px']::before,
+      & .ql-picker-item[data-value='38px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='40px']::before,
+      & .ql-picker-item[data-value='40px']::before {
+        content: '40px';
+      }
+
+      & .ql-picker-label[data-value='42px']::before,
+      & .ql-picker-item[data-value='42px']::before {
+        content: '42px';
+      }
+
+      & .ql-picker-label[data-value='44px']::before,
+      & .ql-picker-item[data-value='44px']::before {
+        content: '44px';
+      }
+
+      & .ql-picker-item[data-value='20px']::before {
+        line-height: 20px;
+      }
+
+      & .ql-picker-item[data-value='22px']::before {
+        line-height: 22px;
+      }
+
+      & .ql-picker-item[data-value='24px']::before {
+        line-height: 24px;
+      }
+
+      & .ql-picker-item[data-value='26px']::before {
+        line-height: 26px;
+      }
+
+      & .ql-picker-item[data-value='28px']::before {
+        line-height: 28px;
+      }
+
+      & .ql-picker-item[data-value='30px']::before {
+        line-height: 30px;
+      }
+
+      & .ql-picker-item[data-value='32px']::before {
+        line-height: 32px;
+      }
+
+      & .ql-picker-item[data-value='34px']::before {
+        line-height: 34px;
+      }
+
+      & .ql-picker-item[data-value='36px']::before {
+        line-height: 36px;
+      }
+
+      & .ql-picker-item[data-value='38px']::before {
+        line-height: 38px;
+      }
+
+      & .ql-picker-item[data-value='40px']::before {
+        line-height: 40px;
+      }
+
+      & .ql-picker-item[data-value='44px']::before {
+        line-height: 44px;
+      }
+    }
+  }
+}
+
+.ql-container {
+    .ql-editor {
+    & .ql-size-10px {
+        font-size: 10px;
+    }
+
+    & .ql-size-12px {
+        font-size: 12px;
+    }
+
+    & .ql-size-14px {
+        font-size: 14px;
+    }
+
+    & .ql-size-16px {
+        font-size: 16px;
+    }
+
+    & .ql-size-18px {
+        font-size: 18px;
+    }
+
+    & .ql-size-24px {
+        font-size: 24px;
+    }
+
+    & .ql-size-32px {
+        font-size: 32px;
+    }
+
+    & .ql-size-40px {
+        font-size: 40px;
+    }
+    }
+}
+  
+  .ql-size-10px {
+    font-size: 10px;
+  }
+  .ql-size-12px {
+    font-size: 12px;
+  }
+  .ql-size-14px {
+    font-size: 14px;
+  }
+  .ql-size-16px {
+    font-size: 16px;
+  }
+  .ql-size-18px {
+    font-size: 18px;
+  }
+  .ql-size-24px {
+    font-size: 24px;
+  }
+  .ql-size-32px {
+    font-size: 32px;
+  }
+  .ql-size-40px {
+    font-size: 40px;
+  }
+  .ql-lineHeight-1 {
+    line-height: 1;
+  }
+  .ql-lineHeight-1-5 {
+    line-height: 1.5;
+  }
+  .ql-lineHeight-2 {
+    line-height: 2;
+  }
+  .ql-lineHeight-2-5 {
+    line-height: 2.5;
+  }
+  .ql-lineHeight-3 {
+    line-height: 3;
+  }

src/pages/JoinZZ/biddingDocument/index.tsx

@@ -144,26 +144,6 @@ const NoticeTableList: React.FC = () => {
                                 message.error(res.msg)
                             }
                         })
-                        pushJoinList().then((res: any) => {
-                            if (res.code == 200) {
-                                if (actionRef.current) {
-                                    actionRef.current.reload();
-                                }
-                                message.success(res.msg)
-                            } else {
-                                message.error(res.msg)
-                            }
-                        })
-                        pushJoin().then((res: any) => {
-                            if (res.code == 200) {
-                                if (actionRef.current) {
-                                    actionRef.current.reload();
-                                }
-                                message.success(res.msg)
-                            } else {
-                                message.error(res.msg)
-                            }
-                        })
                     }}
                 >
                     {record.pushStatus == 0 ? '发布' : '已发布'}
@@ -196,19 +176,22 @@ const NoticeTableList: React.FC = () => {
             ],
         },
     ];
-/**
+    /**
      * 一键发布
      */
-const publishing = async () => {
-    try {
-        const resp = pushBiddingDocumentDetailAll();
-        if (resp.code === 200) {
-            message.success('发布成功');
-        } else {
-            message.error(resp.msg);
-        }
-    } catch (error) { }
-}
+    const publishing = async () => {
+        try {
+            const resp = await pushJoinList();
+            if (resp.code === 200) {
+                message.success('发布成功');
+                if(actionRef){
+                    actionRef.current.reload();
+                }
+            } else {
+                message.error(resp.msg);
+            }
+        } catch (error) { }
+    }
     return (
         <KeepAlive name={'招标文件'} path="/JoinZZ/biddingDocument">
             <PageContainer>

src/pages/JoinZZ/vacancy/edit.tsx

@@ -10,10 +10,25 @@ import { upload } from '@/services/JoinZZ/vacancy';
 import { getDataEnumList } from '@/services/system/Enum';
 // import Quill from "quill";
 // import "quill/dist/quill.snow.css";
-import ReactQuill from 'react-quill';
+import ReactQuill, { Quill } from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import moment from 'moment';
+const SizeStyle = Quill.import('attributors/style/size')
+SizeStyle.whitelist = ['6px','8px','9px','10px','11px','12px','14px', '16px', '18px', '20px','22px','24px','26px','28px', '32px', '36px','48px','72px']
+Quill.register(SizeStyle, true)
+var Parchment = Quill.import('parchment');
 
+let config = {
+  scope: Parchment.Scope.INLINE,
+  // 会有下拉框列表
+  whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
+  //可设置成没有下拉框的，但会导致无法清除样式
+  // whitelist: ['1px solid #000000']  
+};
+
+let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
+
+Quill.register(wordBox, true);
 export type VacancyProps = {
   onCancel: (flag?: boolean, formVals?: any) => void;
   onSubmit: (values: any) => Promise<void>;
@@ -25,26 +40,18 @@ let toolbarOptions = [
   ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
   ['blockquote', 'code-block'],
   ['link', 'image'],
-
-
-  [{ 'header': 1 }, { 'header': 2 }],               // 用户自定义按钮值
   [{ 'list': 'ordered' }, { 'list': 'bullet' }],
   [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标/下标
   [{ 'indent': '-1' }, { 'indent': '+1' }],          // 减少缩进/缩进
   [{ 'direction': 'rtl' }],                         // 文本下划线
-
-
-  [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
+  // [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
+  [{ 'size': ['6px','8px','9px','10px','11px','12px','14px', '16px', '18px', '20px','22px','24px','26px','28px', '32px', '36px','48px','72px']}],
   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-
-
   [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
-  [{ 'font': [] }],
-  [{ 'align': [] }],
-  // [{ 'wordBox': ['20px', '22px', '24px', '26px', '28px', '28px', '30px'] }],
   [{ wordBox: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px'] }],
-  ['clean'],                                         // 清除格式
-
+  // [{ 'font': [] }],
+  [{ 'align': [] }],
+  ['clean'], // 清除格式
 ];
 const modules = {
   toolbar: {
@@ -188,11 +195,11 @@ const VacancyForm: React.FC<VacancyProps> = (props) => {
     const range = quill.getSelection()
     if (range) {
       if (range.length == 0 && range.index !== 0) {
-        console.log('User cursor is at index', range.index)
+        // console.log('User cursor is at index', range.index)
         setUserIndex(range.index)
       } else {
         const text = quill.getText(range.index, range.length)
-        console.log('User has highlighted: ', text)
+        // console.log('User has highlighted: ', text)
       }
     } else {
       console.log('User cursor is not in editor')

src/pages/JoinZZ/vacancy/index.less

@@ -1,3 +1,335 @@
 .ant-pro-table-list-toolbar-title{
     display:none;
-}
+}
+.ql-toolbar {
+  &.ql-snow .ql-picker {
+    &.ql-size {
+      width: 60px;
+
+      & .ql-picker-label::before,
+      .ql-picker-item::before {
+        content: '默认';
+      }
+      & .ql-picker-label[data-value='6px']::before,
+      & .ql-picker-item[data-value='6px']::before {
+        content: '6px';
+      }
+      & .ql-picker-label[data-value='8px']::before,
+      & .ql-picker-item[data-value='8px']::before {
+        content: '8px';
+      }
+      & .ql-picker-label[data-value='9px']::before,
+      & .ql-picker-item[data-value='9px']::before {
+        content: '9px';
+      }
+      & .ql-picker-label[data-value='10px']::before,
+      & .ql-picker-item[data-value='10px']::before {
+        content: '10px';
+      }
+      & .ql-picker-label[data-value='11px']::before,
+      & .ql-picker-item[data-value='11px']::before {
+        content: '11px';
+      }
+
+      & .ql-picker-label[data-value='12px']::before,
+      & .ql-picker-item[data-value='12px']::before {
+        content: '12px';
+      }
+
+      & .ql-picker-label[data-value='14px']::before,
+      & .ql-picker-item[data-value='14px']::before {
+        content: '14px';
+      }
+
+      & .ql-picker-label[data-value='16px']::before,
+      & .ql-picker-item[data-value='16px']::before {
+        content: '16px';
+      }
+
+      & .ql-picker-label[data-value='18px']::before,
+      & .ql-picker-item[data-value='18px']::before {
+        content: '18px';
+      }
+      & .ql-picker-label[data-value='20px']::before,
+      & .ql-picker-item[data-value='20px']::before {
+        content: '20px';
+      }
+      & .ql-picker-label[data-value='22px']::before,
+      & .ql-picker-item[data-value='22px']::before {
+        content: '22px';
+      }
+      & .ql-picker-label[data-value='24px']::before,
+      & .ql-picker-item[data-value='24px']::before {
+        content: '24px';
+      }
+      & .ql-picker-label[data-value='26px']::before,
+      & .ql-picker-item[data-value='26px']::before {
+        content: '26px';
+      }
+      & .ql-picker-label[data-value='28px']::before,
+      & .ql-picker-item[data-value='28px']::before {
+        content: '28px';
+      }
+
+      & .ql-picker-label[data-value='32px']::before,
+      & .ql-picker-item[data-value='32px']::before {
+        content: '32px';
+      }
+      & .ql-picker-label[data-value='36px']::before,
+      & .ql-picker-item[data-value='36px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='48px']::before,
+      & .ql-picker-item[data-value='48px']::before {
+        content: '48px';
+      }
+      & .ql-picker-label[data-value='72px']::before,
+      & .ql-picker-item[data-value='72px']::before {
+        content: '72px';
+      }
+
+      & .ql-picker-item[data-value='6px']::before {
+        font-size: 6px;
+      }
+      & .ql-picker-item[data-value='8px']::before {
+        font-size: 8px;
+      }
+      & .ql-picker-item[data-value='9px']::before {
+        font-size: 9px;
+      }
+      & .ql-picker-item[data-value='10px']::before {
+        font-size: 10px;
+      }
+      & .ql-picker-item[data-value='11px']::before {
+        font-size: 11px;
+      }
+      & .ql-picker-item[data-value='12px']::before {
+        font-size: 12px;
+      }
+      & .ql-picker-item[data-value='14px']::before {
+        font-size: 14px;
+      }
+
+      & .ql-picker-item[data-value='16px']::before {
+        font-size: 16px;
+      }
+
+      & .ql-picker-item[data-value='18px']::before {
+        font-size: 18px;
+      }
+      & .ql-picker-item[data-value='20px']::before {
+        font-size: 20px;
+      }      
+      & .ql-picker-item[data-value='22px']::before {
+        font-size: 22px;
+      }
+      & .ql-picker-item[data-value='24px']::before {
+        font-size: 24px;
+      }
+      & .ql-picker-item[data-value='26px']::before {
+        font-size: 26px;
+      }
+      & .ql-picker-item[data-value='28px']::before {
+        font-size: 28px;
+      }
+
+      & .ql-picker-item[data-value='32px']::before {
+        font-size: 32px;
+      }
+      & .ql-picker-item[data-value='36px']::before {
+        font-size: 36px;
+      }
+      
+      & .ql-picker-item[data-value='48px']::before {
+        font-size: 48px;
+      }
+      & .ql-picker-item[data-value='72px']::before {
+        font-size: 72px;
+      }
+    }
+
+    &.ql-wordBox {
+      width: 60px;
+
+      & .ql-picker-label::before,
+      .ql-picker-item::before {
+        content: '默认';
+      }
+
+      & .ql-picker-label[data-value='20px']::before,
+      & .ql-picker-item[data-value='20px']::before {
+        content: '20px';
+      }
+
+      & .ql-picker-label[data-value='22px']::before,
+      & .ql-picker-item[data-value='22px']::before {
+        content: '22px';
+      }
+
+      & .ql-picker-label[data-value='24px']::before,
+      & .ql-picker-item[data-value='24px']::before {
+        content: '24px';
+      }
+
+      & .ql-picker-label[data-value='26px']::before,
+      & .ql-picker-item[data-value='26px']::before {
+        content: '26px';
+      }
+
+      & .ql-picker-label[data-value='28px']::before,
+      & .ql-picker-item[data-value='28px']::before {
+        content: '28px';
+      }
+
+      & .ql-picker-label[data-value='30px']::before,
+      & .ql-picker-item[data-value='30px']::before {
+        content: '30px';
+      }
+
+      & .ql-picker-label[data-value='32px']::before,
+      & .ql-picker-item[data-value='32px']::before {
+        content: '32px';
+      }
+
+      & .ql-picker-label[data-value='34px']::before,
+      & .ql-picker-item[data-value='34px']::before {
+        content: '34px';
+      }
+
+      & .ql-picker-label[data-value='36px']::before,
+      & .ql-picker-item[data-value='36px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='38px']::before,
+      & .ql-picker-item[data-value='38px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='40px']::before,
+      & .ql-picker-item[data-value='40px']::before {
+        content: '40px';
+      }
+
+      & .ql-picker-label[data-value='42px']::before,
+      & .ql-picker-item[data-value='42px']::before {
+        content: '42px';
+      }
+
+      & .ql-picker-label[data-value='44px']::before,
+      & .ql-picker-item[data-value='44px']::before {
+        content: '44px';
+      }
+
+      & .ql-picker-item[data-value='20px']::before {
+        line-height: 20px;
+      }
+
+      & .ql-picker-item[data-value='22px']::before {
+        line-height: 22px;
+      }
+
+      & .ql-picker-item[data-value='24px']::before {
+        line-height: 24px;
+      }
+
+      & .ql-picker-item[data-value='26px']::before {
+        line-height: 26px;
+      }
+
+      & .ql-picker-item[data-value='28px']::before {
+        line-height: 28px;
+      }
+
+      & .ql-picker-item[data-value='30px']::before {
+        line-height: 30px;
+      }
+
+      & .ql-picker-item[data-value='32px']::before {
+        line-height: 32px;
+      }
+
+      & .ql-picker-item[data-value='34px']::before {
+        line-height: 34px;
+      }
+
+      & .ql-picker-item[data-value='36px']::before {
+        line-height: 36px;
+      }
+
+      & .ql-picker-item[data-value='38px']::before {
+        line-height: 38px;
+      }
+
+      & .ql-picker-item[data-value='40px']::before {
+        line-height: 40px;
+      }
+
+      & .ql-picker-item[data-value='44px']::before {
+        line-height: 44px;
+      }
+    }
+  }
+}
+
+.ql-container {
+    .ql-editor {
+    & .ql-size-10px {
+        font-size: 10px;
+    }
+
+    & .ql-size-12px {
+        font-size: 12px;
+    }
+
+    & .ql-size-14px {
+        font-size: 14px;
+    }
+
+    & .ql-size-16px {
+        font-size: 16px;
+    }
+
+    & .ql-size-18px {
+        font-size: 18px;
+    }
+
+    & .ql-size-24px {
+        font-size: 24px;
+    }
+
+    & .ql-size-32px {
+        font-size: 32px;
+    }
+
+    & .ql-size-40px {
+        font-size: 40px;
+    }
+    }
+}
+  
+  .ql-size-10px {
+    font-size: 10px;
+  }
+  .ql-size-12px {
+    font-size: 12px;
+  }
+  .ql-size-14px {
+    font-size: 14px;
+  }
+  .ql-size-16px {
+    font-size: 16px;
+  }
+  .ql-size-18px {
+    font-size: 18px;
+  }
+  .ql-size-24px {
+    font-size: 24px;
+  }
+  .ql-size-32px {
+    font-size: 32px;
+  }
+  .ql-size-40px {
+    font-size: 40px;
+  }

src/pages/JoinZZ/vacancy/index.tsx

@@ -57,6 +57,20 @@ const NoticeTableList: React.FC = () => {
         getEnum()
     }, [])
 
+    /**
+     * 一键发布
+     */
+    const publishing = async () => {
+        try {
+            const resp = await pushVacancyDetail();
+            console.log(resp)
+            if (resp.code === 200) {
+                message.success('发布成功');
+            } else {
+                message.error(resp.msg);
+            }
+        } catch (error) { }
+    }
     const getEnum = ()=>{
         getDataEnumList({ enumUuid: '2024511920818108' }).then((res) => {
             console.log(res.rows)
@@ -168,7 +182,14 @@ const NoticeTableList: React.FC = () => {
                                 }}
                             >
                                 <PlusOutlined /> <FormattedMessage id="public.add" defaultMessage="新建" />
-                            </Button>
+                            </Button>,
+                             <Button
+                                type="primary"
+                                key="fabu"
+                                onClick={publishing}
+                            >
+                                 一键发布
+                             </Button>,
                         ]}
                         request={(params) => {
                             return getVacancyList({ ...params } as API.System.NoticeListParams).then((res) => {

src/pages/News/NewsList/edit.tsx

@@ -10,12 +10,30 @@ import {
 } from '@ant-design/pro-components';
 import { Form, Drawer, Upload, Space, Button } from 'antd';
 import { useIntl } from '@umijs/max';
-import ReactQuill from 'react-quill';
+import ReactQuill, { Quill } from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import { upload } from '@/services/news/news';
 import { getDataEnumList } from '@/services/system/Enum';
 
 import moment from 'moment';
+const SizeStyle = Quill.import('attributors/style/size')
+SizeStyle.whitelist = ['6px','8px','9px','10px','11px','12px','14px', '16px', '18px', '20px','22px','24px','26px','28px', '32px', '36px','48px','72px']
+Quill.register(SizeStyle, true)
+
+var Parchment = Quill.import('parchment');
+
+let config = {
+  scope: Parchment.Scope.INLINE,
+  // 会有下拉框列表
+  whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
+  //可设置成没有下拉框的，但会导致无法清除样式
+  // whitelist: ['1px solid #000000']  
+};
+
+let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
+
+Quill.register(wordBox, true);
+
 export type NewsProps = {
   onCancel: (flag?: boolean, formVals?: any) => void;
   onSubmit: (values: any) => Promise<void>;
@@ -23,20 +41,21 @@ export type NewsProps = {
   currentRow: any;
 };
 let toolbarOptions = [
-  ['bold', 'italic', 'underline', 'strike'],
+  ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
   ['blockquote', 'code-block'],
   ['link', 'image'],
   [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-  [{ 'script': 'sub' }, { 'script': 'super' }],
-  [{ 'indent': '-1' }, { 'indent': '+1' }],
-  [{ 'direction': 'rtl' }],
-  [{ 'size': ['small', false, 'large', 'huge'] }],
+  [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标/下标
+  [{ 'indent': '-1' }, { 'indent': '+1' }],          // 减少缩进/缩进
+  [{ 'direction': 'rtl' }],                         // 文本下划线
+  // [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
+  [{ 'size': ['6px','8px','9px','10px','11px','12px','14px', '16px', '18px', '20px','22px','24px','26px','28px', '32px', '36px','48px','72px']}],
   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
-  [{ 'color': [] }, { 'background': [] }],
-  [{ 'font': [] }],
-  [{ 'align': [] }],
+  [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
   [{ wordBox: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px'] }],
-  ['clean'],
+  // [{ 'font': [] }],
+  [{ 'align': [] }],
+  ['clean'], // 清除格式
 ];
 const modules = {
   toolbar: {
@@ -145,11 +164,11 @@ const NewsForm: React.FC<NewsProps> = (props) => {
     const range = quill.getSelection()
     if (range) {
       if (range.length == 0 && range.index !== 0) {
-        console.log('User cursor is at index', range.index)
+        // console.log('User cursor is at index', range.index)
         setUserIndex(range.index)
       } else {
         const text = quill.getText(range.index, range.length)
-        console.log('User has highlighted: ', text)
+        // console.log('User has highlighted: ', text)
       }
     } else {
       console.log('User cursor is not in editor')

src/pages/News/NewsList/index.less

@@ -1,3 +1,344 @@
-.ant-pro-table-list-toolbar-title{
-    display:none;
+.ant-pro-table-list-toolbar-title {
+  display: none;
+}
+
+
+.ql-toolbar {
+  &.ql-snow .ql-picker {
+    &.ql-size {
+      width: 60px;
+
+      & .ql-picker-label::before,
+      .ql-picker-item::before {
+        content: '默认';
+      }
+      & .ql-picker-label[data-value='6px']::before,
+      & .ql-picker-item[data-value='6px']::before {
+        content: '6px';
+      }
+      & .ql-picker-label[data-value='8px']::before,
+      & .ql-picker-item[data-value='8px']::before {
+        content: '8px';
+      }
+      & .ql-picker-label[data-value='9px']::before,
+      & .ql-picker-item[data-value='9px']::before {
+        content: '9px';
+      }
+      & .ql-picker-label[data-value='10px']::before,
+      & .ql-picker-item[data-value='10px']::before {
+        content: '10px';
+      }
+      & .ql-picker-label[data-value='11px']::before,
+      & .ql-picker-item[data-value='11px']::before {
+        content: '11px';
+      }
+
+      & .ql-picker-label[data-value='12px']::before,
+      & .ql-picker-item[data-value='12px']::before {
+        content: '12px';
+      }
+
+      & .ql-picker-label[data-value='14px']::before,
+      & .ql-picker-item[data-value='14px']::before {
+        content: '14px';
+      }
+
+      & .ql-picker-label[data-value='16px']::before,
+      & .ql-picker-item[data-value='16px']::before {
+        content: '16px';
+      }
+
+      & .ql-picker-label[data-value='18px']::before,
+      & .ql-picker-item[data-value='18px']::before {
+        content: '18px';
+      }
+      & .ql-picker-label[data-value='20px']::before,
+      & .ql-picker-item[data-value='20px']::before {
+        content: '20px';
+      }
+      & .ql-picker-label[data-value='22px']::before,
+      & .ql-picker-item[data-value='22px']::before {
+        content: '22px';
+      }
+      & .ql-picker-label[data-value='24px']::before,
+      & .ql-picker-item[data-value='24px']::before {
+        content: '24px';
+      }
+      & .ql-picker-label[data-value='26px']::before,
+      & .ql-picker-item[data-value='26px']::before {
+        content: '26px';
+      }
+      & .ql-picker-label[data-value='28px']::before,
+      & .ql-picker-item[data-value='28px']::before {
+        content: '28px';
+      }
+
+      & .ql-picker-label[data-value='32px']::before,
+      & .ql-picker-item[data-value='32px']::before {
+        content: '32px';
+      }
+      & .ql-picker-label[data-value='36px']::before,
+      & .ql-picker-item[data-value='36px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='48px']::before,
+      & .ql-picker-item[data-value='48px']::before {
+        content: '48px';
+      }
+      & .ql-picker-label[data-value='72px']::before,
+      & .ql-picker-item[data-value='72px']::before {
+        content: '72px';
+      }
+
+      & .ql-picker-item[data-value='6px']::before {
+        font-size: 6px;
+      }
+      & .ql-picker-item[data-value='8px']::before {
+        font-size: 8px;
+      }
+      & .ql-picker-item[data-value='9px']::before {
+        font-size: 9px;
+      }
+      & .ql-picker-item[data-value='10px']::before {
+        font-size: 10px;
+      }
+      & .ql-picker-item[data-value='11px']::before {
+        font-size: 11px;
+      }
+      & .ql-picker-item[data-value='12px']::before {
+        font-size: 12px;
+      }
+      & .ql-picker-item[data-value='14px']::before {
+        font-size: 14px;
+      }
+
+      & .ql-picker-item[data-value='16px']::before {
+        font-size: 16px;
+      }
+
+      & .ql-picker-item[data-value='18px']::before {
+        font-size: 18px;
+      }
+      & .ql-picker-item[data-value='20px']::before {
+        font-size: 20px;
+      }      
+      & .ql-picker-item[data-value='22px']::before {
+        font-size: 22px;
+      }
+      & .ql-picker-item[data-value='24px']::before {
+        font-size: 24px;
+      }
+      & .ql-picker-item[data-value='26px']::before {
+        font-size: 26px;
+      }
+      & .ql-picker-item[data-value='28px']::before {
+        font-size: 28px;
+      }
+
+      & .ql-picker-item[data-value='32px']::before {
+        font-size: 32px;
+      }
+      & .ql-picker-item[data-value='36px']::before {
+        font-size: 36px;
+      }
+      
+      & .ql-picker-item[data-value='48px']::before {
+        font-size: 48px;
+      }
+      & .ql-picker-item[data-value='72px']::before {
+        font-size: 72px;
+      }
+    }
+
+    &.ql-wordBox {
+      width: 60px;
+
+      & .ql-picker-label::before,
+      .ql-picker-item::before {
+        content: '默认';
+      }
+
+      & .ql-picker-label[data-value='20px']::before,
+      & .ql-picker-item[data-value='20px']::before {
+        content: '20px';
+      }
+
+      & .ql-picker-label[data-value='22px']::before,
+      & .ql-picker-item[data-value='22px']::before {
+        content: '22px';
+      }
+
+      & .ql-picker-label[data-value='24px']::before,
+      & .ql-picker-item[data-value='24px']::before {
+        content: '24px';
+      }
+
+      & .ql-picker-label[data-value='26px']::before,
+      & .ql-picker-item[data-value='26px']::before {
+        content: '26px';
+      }
+
+      & .ql-picker-label[data-value='28px']::before,
+      & .ql-picker-item[data-value='28px']::before {
+        content: '28px';
+      }
+
+      & .ql-picker-label[data-value='30px']::before,
+      & .ql-picker-item[data-value='30px']::before {
+        content: '30px';
+      }
+
+      & .ql-picker-label[data-value='32px']::before,
+      & .ql-picker-item[data-value='32px']::before {
+        content: '32px';
+      }
+
+      & .ql-picker-label[data-value='34px']::before,
+      & .ql-picker-item[data-value='34px']::before {
+        content: '34px';
+      }
+
+      & .ql-picker-label[data-value='36px']::before,
+      & .ql-picker-item[data-value='36px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='38px']::before,
+      & .ql-picker-item[data-value='38px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='40px']::before,
+      & .ql-picker-item[data-value='40px']::before {
+        content: '40px';
+      }
+
+      & .ql-picker-label[data-value='42px']::before,
+      & .ql-picker-item[data-value='42px']::before {
+        content: '42px';
+      }
+
+      & .ql-picker-label[data-value='44px']::before,
+      & .ql-picker-item[data-value='44px']::before {
+        content: '44px';
+      }
+
+      & .ql-picker-item[data-value='20px']::before {
+        line-height: 20px;
+      }
+
+      & .ql-picker-item[data-value='22px']::before {
+        line-height: 22px;
+      }
+
+      & .ql-picker-item[data-value='24px']::before {
+        line-height: 24px;
+      }
+
+      & .ql-picker-item[data-value='26px']::before {
+        line-height: 26px;
+      }
+
+      & .ql-picker-item[data-value='28px']::before {
+        line-height: 28px;
+      }
+
+      & .ql-picker-item[data-value='30px']::before {
+        line-height: 30px;
+      }
+
+      & .ql-picker-item[data-value='32px']::before {
+        line-height: 32px;
+      }
+
+      & .ql-picker-item[data-value='34px']::before {
+        line-height: 34px;
+      }
+
+      & .ql-picker-item[data-value='36px']::before {
+        line-height: 36px;
+      }
+
+      & .ql-picker-item[data-value='38px']::before {
+        line-height: 38px;
+      }
+
+      & .ql-picker-item[data-value='40px']::before {
+        line-height: 40px;
+      }
+
+      & .ql-picker-item[data-value='44px']::before {
+        line-height: 44px;
+      }
+    }
+  }
+}
+
+.ql-container {
+  .ql-editor {
+    & .ql-size-10px {
+      font-size: 10px;
+    }
+
+    & .ql-size-12px {
+      font-size: 12px;
+    }
+
+    & .ql-size-14px {
+      font-size: 14px;
+    }
+
+    & .ql-size-16px {
+      font-size: 16px;
+    }
+
+    & .ql-size-18px {
+      font-size: 18px;
+    }
+
+    & .ql-size-24px {
+      font-size: 24px;
+    }
+
+    & .ql-size-32px {
+      font-size: 32px;
+    }
+
+    & .ql-size-40px {
+      font-size: 40px;
+    }
+  }
+}
+
+.ql-size-10px {
+  font-size: 10px;
+}
+
+.ql-size-12px {
+  font-size: 12px;
+}
+
+.ql-size-14px {
+  font-size: 14px;
+}
+
+.ql-size-16px {
+  font-size: 16px;
+}
+
+.ql-size-18px {
+  font-size: 18px;
+}
+
+.ql-size-24px {
+  font-size: 24px;
+}
+
+.ql-size-32px {
+  font-size: 32px;
+}
+
+.ql-size-40px {
+  font-size: 40px;
 }

src/pages/PartyWork/partyWork/edit.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState, useRef } from 'react';
 import {
-  ProForm,
-  ProFormText,
-  ProFormSelect,
-  ProFormDatePicker,
+    ProForm,
+    ProFormText,
+    ProFormSelect,
+    ProFormDatePicker,
+    ProFormDateTimePicker,
 } from '@ant-design/pro-components';
 import { Form, Drawer, Upload, Space, Button } from 'antd';
 
@@ -12,38 +13,54 @@ import { upload } from '@/services/partyWork/partyWork';
 import { getDataEnumList } from '@/services/system/Enum';
 // import Quill from "quill";
 // import "quill/dist/quill.snow.css";
-import ReactQuill from 'react-quill';
+import ReactQuill, { Quill } from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import moment from 'moment';
+const SizeStyle = Quill.import('attributors/style/size')
+SizeStyle.whitelist = ['6px','8px','9px','10px','11px','12px','14px', '16px', '18px', '20px','22px','24px','26px','28px', '32px', '36px','48px','72px']
+Quill.register(SizeStyle, true)
+var Parchment = Quill.import('parchment');
+
+let config = {
+  scope: Parchment.Scope.INLINE,
+  // 会有下拉框列表
+  whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
+  //可设置成没有下拉框的，但会导致无法清除样式
+  // whitelist: ['1px solid #000000']  
+};
+
+let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
+
+Quill.register(wordBox, true);
 export type PartyWorkProps = {
-  onCancel: (flag?: boolean, formVals?: any) => void;
-  onSubmit: (values: any) => Promise<void>;
-  open: boolean;
-  currentRow: any;
+    onCancel: (flag?: boolean, formVals?: any) => void;
+    onSubmit: (values: any) => Promise<void>;
+    open: boolean;
+    currentRow: any;
 };
 
 let toolbarOptions = [
-  ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
-  ['blockquote', 'code-block'],
-  ['link', 'image'],
-  [{ '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': [] }],
-  // [{ 'wordBox': ['20px', '22px', '24px', '26px', '28px', '28px', '30px'] }],
-  [{ wordBox: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px'] }],
-  ['clean'],                                         // 清除格式
+    ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
+    ['blockquote', 'code-block'],
+    ['link', 'image'],
+    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+    [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标/下标
+    [{ 'indent': '-1' }, { 'indent': '+1' }],          // 减少缩进/缩进
+    [{ 'direction': 'rtl' }],                         // 文本下划线
+    // [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
+    [{ 'size': ['6px','8px','9px','10px','11px','12px','14px', '16px', '18px', '20px','22px','24px','26px','28px', '32px', '36px','48px','72px']}],
+    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+    [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
+    [{ wordBox: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px'] }],
+    // [{ 'font': [] }],
+    [{ 'align': [] }],
+    ['clean'], // 清除格式
 
 ];
 const modules = {
-  toolbar: {
-    container: toolbarOptions, // 使用自定义工具栏选项
-  },
+    toolbar: {
+        container: toolbarOptions, // 使用自定义工具栏选项
+    },
 };
 // function image(){
 //   var _this3 = this;
@@ -77,307 +94,315 @@ const modules = {
 // }
 const PartyWorkForm: React.FC<PartyWorkProps> = (props) => {
 
-  const [form] = Form.useForm();
-  const intl = useIntl();
-  let editorRef = useRef<HTMLDivElement>(null)
-  const [editWho, setEditWho] = useState('')
-  const [userIndex, setUserIndex] = useState(0)
-  const [editorHtml, setEditorHtml] = useState('');
-  useEffect(() => {
-    form.resetFields();
-    if(!props.open) return;
-    // const { title, content, surface, surfaceUrl, date } = props;
-    if(!props.currentRow) return;
-    const { digest, top,key,content,surface,surfaceUrl,date,title,source,column} = props.currentRow;
-    if (props.currentRow) {
-      form.setFieldsValue({
-        digest,
-        top,
-        key,
-        column,
-        source
-      })
-      // if (top) {
-      //   setCheckTop(1)
-      // } else {
-      //   setCheckTop(0)
-      // }
-    }
+    const [form] = Form.useForm();
+    const intl = useIntl();
+    let editorRef = useRef<HTMLDivElement>(null)
+    const [editWho, setEditWho] = useState('')
+    const [userIndex, setUserIndex] = useState(0)
+    const [editorHtml, setEditorHtml] = useState('');
+    useEffect(() => {
+        form.resetFields();
+        if (!props.open) return;
+        // const { title, content, surface, surfaceUrl, date } = props;
+        if (!props.currentRow) return;
+        const { digest, top, key, content, surface, surfaceUrl, date, title, source, column,createTime } = props.currentRow;
+        if (props.currentRow) {
+            form.setFieldsValue({
+                digest,
+                top,
+                key,
+                column,
+                source,
+                createTime
+            })
+            // if (top) {
+            //   setCheckTop(1)
+            // } else {
+            //   setCheckTop(0)
+            // }
+        }
 
-    setSurface(surface)
-    form.setFieldsValue({
-      title: title,
-      date: date,
-    })
-    if (surfaceUrl && surface) {
-      setFileList([
-        {
-          uid: surface,
-          thumbUrl: surfaceUrl
+        setSurface(surface)
+        form.setFieldsValue({
+            title: title,
+            date: date,
+        })
+        if (surfaceUrl && surface) {
+            setFileList([
+                {
+                    uid: surface,
+                    thumbUrl: surfaceUrl
+                }
+            ])
         }
-      ])
-    }
-    // if (editorRef && editorRef.current && editorRef.current.children[0]) {
-    //   editorRef.current.children[0].innerHTML = content
-    // }
-    setEditorHtml(content || '')
-  }, [props.open,props.currentRow]);
-  const base64ToFile = (base64, fileName = `${Math.random()}`) => {
-    let arr = base64.split(',')
-    console.log(arr[0])
-    let mime = arr[0].match(/:(.*?);/)[1]
-    let bstr = atob(arr[1])
-    let n = bstr.length
-    let u8arr = new Uint8Array(n)
-    while (n--) {
-      u8arr[n] = bstr.charCodeAt(n)
-    }
-    return new File([u8arr], `${fileName}.${mime.split('/')[1]}`, {
-      type: mime,
-    })
-  }
-  useEffect(() => {
-    if(editorRef?.current){
-      const quill = editorRef.current.getEditor()
-      if (editWho === 'api' && userIndex !== 0) {
-        quill.setSelection(userIndex + 2)
-      }
+        // if (editorRef && editorRef.current && editorRef.current.children[0]) {
+        //   editorRef.current.children[0].innerHTML = content
+        // }
+        setEditorHtml(content || '')
+    }, [props.open, props.currentRow]);
+    const base64ToFile = (base64, fileName = `${Math.random()}`) => {
+        let arr = base64.split(',')
+        console.log(arr[0])
+        let mime = arr[0].match(/:(.*?);/)[1]
+        let bstr = atob(arr[1])
+        let n = bstr.length
+        let u8arr = new Uint8Array(n)
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n)
+        }
+        return new File([u8arr], `${fileName}.${mime.split('/')[1]}`, {
+            type: mime,
+        })
     }
-  }, [editorHtml,userIndex])
+    useEffect(() => {
+        if (editorRef?.current) {
+            const quill = editorRef.current.getEditor()
+            if (editWho === 'api' && userIndex !== 0) {
+                quill.setSelection(userIndex + 2)
+            }
+        }
+    }, [editorHtml, userIndex])
 
-  const [fileList, setFileList] = useState<any>([]);
-  const [surface, setSurface] = useState<any>('');
+    const [fileList, setFileList] = useState<any>([]);
+    const [surface, setSurface] = useState<any>('');
 
-  const [checkTop, setCheckTop] = useState<any>('')
-  const handleOk = async () => {
-    let data = form.getFieldsValue()
-    let val = await form.validateFields()
-    
-    const htmlStr = editorHtml.replaceAll('"', "'")
+    const [checkTop, setCheckTop] = useState<any>('')
+    const handleOk = async () => {
+        let data = form.getFieldsValue()
+        let val = await form.validateFields()
 
-    // let content = editor.getContents()
-    // console.log('htmlStr----', htmlStr)
-    // editor.setContents(content)
-    data.date = moment(data.date).format('YYYY-MM-DD');
-    if(checkTop){
-      data.top = 1;
-    }else{
-      data.top = 0;
-    } 
-    // data.top = checkTop;
-    let formData = {
-      ...data,
-      surface,
-      content: htmlStr
-    }
-    form.setFieldsValue({
-      title: '',
-      digest: ""
-    })
-    setFileList([]);
-    setCheckTop(false)
-    // editor.clipboard.dangerouslyPasteHTML(0, '')
-    // editor.setContents([])
-    setEditorHtml('');
-    props.onSubmit(formData);
-  };
-  const handleCancel = () => {
-    form.setFieldsValue({
-      title: '',
-      digest: "",
-      top: ""
-    })
-    setFileList([]);
-    setCheckTop(false)
-    // editor.clipboard.dangerouslyPasteHTML(0, '')
-    // editor.setContents([])
-    setEditorHtml('');
-    props.onCancel();
+        const htmlStr = editorHtml.replaceAll('"', "'")
 
-  };
+        // let content = editor.getContents()
+        // console.log('htmlStr----', htmlStr)
+        // editor.setContents(content)
+        data.date = moment(data.date).format('YYYY-MM-DD');
+        data.createTime = moment(data.createTime).format('YYYY-MM-DD HH:mm:ss');
+        if (checkTop) {
+            data.top = 1;
+        } else {
+            data.top = 0;
+        }
+        // data.top = checkTop;
+        let formData = {
+            ...data,
+            surface,
+            content: htmlStr
+        }
+        form.setFieldsValue({
+            title: '',
+            digest: ""
+        })
+        setFileList([]);
+        setCheckTop(false)
+        // editor.clipboard.dangerouslyPasteHTML(0, '')
+        // editor.setContents([])
+        setEditorHtml('');
+        props.onSubmit(formData);
+    };
+    const handleCancel = () => {
+        form.setFieldsValue({
+            title: '',
+            digest: "",
+            top: ""
+        })
+        setFileList([]);
+        setCheckTop(false)
+        // editor.clipboard.dangerouslyPasteHTML(0, '')
+        // editor.setContents([])
+        setEditorHtml('');
+        props.onCancel();
 
-  const handleChange = async (res) => {
-    const { fileList } = res;
-    setFileList(fileList);
-  };
+    };
 
-  const handleBeforeUpload = async (file: RcFile) => {
-    const formData = new FormData();
-    formData.append('file', file, file.name);
-    const res = await upload(formData);
-    if (res?.data?.uuid) {
-      setSurface(res.data.uuid)
-    }
-    return false;
-  };
+    const handleChange = async (res) => {
+        const { fileList } = res;
+        setFileList(fileList);
+    };
 
-  const handleChangeQuill = (content, delta, source, editor) => {
-    let quill = editorRef.current.getEditor()
-    quill.focus()
-    let delta_ops = delta.ops
-    let quilContent = editor.getContents()
-    setEditorHtml(content)
-    const range = quill.getSelection()
-    if (range) {
-      if (range.length == 0 && range.index !== 0) {
-        console.log('User cursor is at index', range.index)
-        setUserIndex(range.index)
-      } else {
-        const text = quill.getText(range.index, range.length)
-        console.log('User has highlighted: ', text)
-      }
-    } else {
-      console.log('User cursor is not in editor')
-    }
-    setEditWho(source)
-    if (delta_ops && delta_ops.length > 0) {
-      quilContent.ops.map((item) => {
-        if (item.insert) {
-          let imgStr = item.insert.image
-          if (imgStr && imgStr?.includes('data:image/')) {
-            let file = base64ToFile(imgStr)
-            let formData = new FormData()
-            formData.append('file', file)
-            upload(formData).then((res) => {
-              item.insert.image = res.data.url
-              quill.setContents(quilContent)
+    const handleBeforeUpload = async (file: RcFile) => {
+        const formData = new FormData();
+        formData.append('file', file, file.name);
+        const res = await upload(formData);
+        if (res?.data?.uuid) {
+            setSurface(res.data.uuid)
+        }
+        return false;
+    };
+
+    const handleChangeQuill = (content, delta, source, editor) => {
+        let quill = editorRef.current.getEditor()
+        quill.focus()
+        let delta_ops = delta.ops
+        let quilContent = editor.getContents()
+        setEditorHtml(content)
+        const range = quill.getSelection()
+        if (range) {
+            if (range.length == 0 && range.index !== 0) {
+                // console.log('User cursor is at index', range.index)
+                setUserIndex(range.index)
+            } else {
+                const text = quill.getText(range.index, range.length)
+                // console.log('User has highlighted: ', text)
+            }
+        } else {
+            console.log('User cursor is not in editor')
+        }
+        setEditWho(source)
+        if (delta_ops && delta_ops.length > 0) {
+            quilContent.ops.map((item) => {
+                if (item.insert) {
+                    let imgStr = item.insert.image
+                    if (imgStr && imgStr?.includes('data:image/')) {
+                        let file = base64ToFile(imgStr)
+                        let formData = new FormData()
+                        formData.append('file', file)
+                        upload(formData).then((res) => {
+                            item.insert.image = res.data.url
+                            quill.setContents(quilContent)
+                        })
+                    }
+                }
             })
-          }
         }
-      })
     }
-  }
 
 
-  return (
-    <Drawer
-      width={'80%'}
-      title={props.currentRow ? '文章编辑' : '新建文章'}
-      open={props.open}
-      destroyOnClose
-      onClose={handleCancel}
-      extra={
-        <Space>
-          <Button onClick={handleCancel}>取消</Button>
-          <Button type="primary" onClick={handleOk}>确认</Button>
-        </Space>
-      }
-    >
-      <ProForm
-        form={form}
-        grid={true}
-        submitter={false}
-        layout="horizontal"
-      >
-        <ProFormText
-          name="title"
-          label='标题'
-          labelCol={{
-            style: { width: 95 }
-          }}
-          placeholder='请输入标题'
-          rules={[
-            {
-              required: true,
-              message: '请输入标题!',
-            },
-          ]}
-        />
-        <ProForm.Item
-          label={'封面图'}
-          extra={'图片尺寸1218*915'}
-          labelCol={{
-            style: { width: 95 }
-          }}
-          rules={[
-            {
-              required: true
+    return (
+        <Drawer
+            width={'80%'}
+            title={props.currentRow ? '文章编辑' : '新建文章'}
+            open={props.open}
+            destroyOnClose
+            onClose={handleCancel}
+            extra={
+                <Space>
+                    <Button onClick={handleCancel}>取消</Button>
+                    <Button type="primary" onClick={handleOk}>确认</Button>
+                </Space>
             }
-          ]
-          }
         >
-          <Upload
-            listType="picture-card" // 设置为图片卡片模式
-            fileList={fileList}
-            maxCount={1}
-            onChange={handleChange}
-            beforeUpload={handleBeforeUpload}
-          >
-            {fileList?.length < 1 && '+' + intl.formatMessage({ id: 'public.uploadImg' })}
-          </Upload>
-        </ProForm.Item>
-        <ProFormDatePicker
-          name="date"
-          label='展示日期'
-          fieldProps={{
-            format: (value) => value.format('YYYY-MM-DD'),
-          }}
-          labelCol={{
-            style: { width: 95 }
-          }}
-          rules={[
-            {
-              required: true
-            }
-          ]
-          }
-        />
+            <ProForm
+                form={form}
+                grid={true}
+                submitter={false}
+                layout="horizontal"
+            >
+                <ProFormText
+                    name="title"
+                    label='标题'
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    placeholder='请输入标题'
+                    rules={[
+                        {
+                            required: true,
+                            message: '请输入标题!',
+                        },
+                    ]}
+                />
+                <ProForm.Item
+                    label={'封面图'}
+                    extra={'图片尺寸1218*915'}
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    rules={[
+                        {
+                            required: true
+                        }
+                    ]
+                    }
+                >
+                    <Upload
+                        listType="picture-card" // 设置为图片卡片模式
+                        fileList={fileList}
+                        maxCount={1}
+                        onChange={handleChange}
+                        beforeUpload={handleBeforeUpload}
+                    >
+                        {fileList?.length < 1 && '+' + intl.formatMessage({ id: 'public.uploadImg' })}
+                    </Upload>
+                </ProForm.Item>
+                <ProFormDatePicker
+                    name="date"
+                    label='展示日期'
+                    fieldProps={{
+                        format: (value) => value.format('YYYY-MM-DD'),
+                    }}
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    rules={[
+                        {
+                            required: true
+                        }
+                    ]
+                    }
+                />
+                <ProFormDateTimePicker
+                    name="createTime"
+                    label='发稿时间'
+                    fieldProps={{ format: (value) => value.format('YYYY-MM-DD HH:mm:ss') }}
+                    labelCol={{ style: { width: 95 } }}
+                    rules={[{ required: true }]}
+                />
+                <ProFormSelect
+                    name="column"
+                    key="column"
+                    label='党建分类'
+                    request={() =>
+                        getDataEnumList({ enumUuid: '2024510243805101' }).then((res) => {
+                            let tList = []
+                            res.rows.forEach(item => {
+                                tList.push({
+                                    label: item.dataName,
+                                    value: item.uuid,
+                                })
+                            })
+                            return tList;
+                        })
 
-        <ProFormSelect
-          name="column"
-          key="column"
-          label='党建分类'
-          request={() =>
-            getDataEnumList({enumUuid: '2024510243805101'}).then((res) => {
-              let tList = []
-              res.rows.forEach(item => {
-                tList.push({
-                  label: item.dataName,
-                  value: item.uuid,
-                })
-              })
-              return tList;
-            })
+                    }
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    placeholder={'请选择新闻分类'}
 
-          }
-          labelCol={{
-            style: { width: 95 }
-          }}
-          placeholder={'请选择新闻分类'}
+                />
 
-        />
-         
-        <ProFormText
-          name="key"
-          label='网页关键字'
-          labelCol={{
-            style: { width: 95 }
-          }}
-          placeholder={'请输入页面关键字'}
-        />
+                <ProFormText
+                    name="key"
+                    label='网页关键字'
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    placeholder={'请输入页面关键字'}
+                />
 
-        <ProFormText
-          name="source"
-          label='来源'
-          labelCol={{
-            style: { width: 95 }
-          }}
-          placeholder={'中泽集团'}
-          initialValue={'中泽集团'}
-        />
+                <ProFormText
+                    name="source"
+                    label='来源'
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    placeholder={'中泽集团'}
+                    initialValue={'中泽集团'}
+                />
 
-        <ProForm.Item 
-        label={'党建文章内容'} 
-        labelCol={{
-          style: { width: 95 }
-        }}
-        >
-          {/* <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div> */}
-          <ReactQuill ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
-        </ProForm.Item>
-      </ProForm>
-    </Drawer>
-  );
+                <ProForm.Item
+                    label={'党建文章内容'}
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                >
+                    {/* <div id='editor' style={{ width: '70vw', height: '500px' }} ref={editorRef}></div> */}
+                    <ReactQuill ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
+                </ProForm.Item>
+            </ProForm>
+        </Drawer>
+    );
 };
 
 export default PartyWorkForm;

src/pages/PartyWork/partyWork/index.less

@@ -1,3 +1,335 @@
 .ant-pro-table-list-toolbar-title{
     display:none;
-}
+}
+.ql-toolbar {
+  &.ql-snow .ql-picker {
+    &.ql-size {
+      width: 60px;
+
+      & .ql-picker-label::before,
+      .ql-picker-item::before {
+        content: '默认';
+      }
+      & .ql-picker-label[data-value='6px']::before,
+      & .ql-picker-item[data-value='6px']::before {
+        content: '6px';
+      }
+      & .ql-picker-label[data-value='8px']::before,
+      & .ql-picker-item[data-value='8px']::before {
+        content: '8px';
+      }
+      & .ql-picker-label[data-value='9px']::before,
+      & .ql-picker-item[data-value='9px']::before {
+        content: '9px';
+      }
+      & .ql-picker-label[data-value='10px']::before,
+      & .ql-picker-item[data-value='10px']::before {
+        content: '10px';
+      }
+      & .ql-picker-label[data-value='11px']::before,
+      & .ql-picker-item[data-value='11px']::before {
+        content: '11px';
+      }
+
+      & .ql-picker-label[data-value='12px']::before,
+      & .ql-picker-item[data-value='12px']::before {
+        content: '12px';
+      }
+
+      & .ql-picker-label[data-value='14px']::before,
+      & .ql-picker-item[data-value='14px']::before {
+        content: '14px';
+      }
+
+      & .ql-picker-label[data-value='16px']::before,
+      & .ql-picker-item[data-value='16px']::before {
+        content: '16px';
+      }
+
+      & .ql-picker-label[data-value='18px']::before,
+      & .ql-picker-item[data-value='18px']::before {
+        content: '18px';
+      }
+      & .ql-picker-label[data-value='20px']::before,
+      & .ql-picker-item[data-value='20px']::before {
+        content: '20px';
+      }
+      & .ql-picker-label[data-value='22px']::before,
+      & .ql-picker-item[data-value='22px']::before {
+        content: '22px';
+      }
+      & .ql-picker-label[data-value='24px']::before,
+      & .ql-picker-item[data-value='24px']::before {
+        content: '24px';
+      }
+      & .ql-picker-label[data-value='26px']::before,
+      & .ql-picker-item[data-value='26px']::before {
+        content: '26px';
+      }
+      & .ql-picker-label[data-value='28px']::before,
+      & .ql-picker-item[data-value='28px']::before {
+        content: '28px';
+      }
+
+      & .ql-picker-label[data-value='32px']::before,
+      & .ql-picker-item[data-value='32px']::before {
+        content: '32px';
+      }
+      & .ql-picker-label[data-value='36px']::before,
+      & .ql-picker-item[data-value='36px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='48px']::before,
+      & .ql-picker-item[data-value='48px']::before {
+        content: '48px';
+      }
+      & .ql-picker-label[data-value='72px']::before,
+      & .ql-picker-item[data-value='72px']::before {
+        content: '72px';
+      }
+
+      & .ql-picker-item[data-value='6px']::before {
+        font-size: 6px;
+      }
+      & .ql-picker-item[data-value='8px']::before {
+        font-size: 8px;
+      }
+      & .ql-picker-item[data-value='9px']::before {
+        font-size: 9px;
+      }
+      & .ql-picker-item[data-value='10px']::before {
+        font-size: 10px;
+      }
+      & .ql-picker-item[data-value='11px']::before {
+        font-size: 11px;
+      }
+      & .ql-picker-item[data-value='12px']::before {
+        font-size: 12px;
+      }
+      & .ql-picker-item[data-value='14px']::before {
+        font-size: 14px;
+      }
+
+      & .ql-picker-item[data-value='16px']::before {
+        font-size: 16px;
+      }
+
+      & .ql-picker-item[data-value='18px']::before {
+        font-size: 18px;
+      }
+      & .ql-picker-item[data-value='20px']::before {
+        font-size: 20px;
+      }      
+      & .ql-picker-item[data-value='22px']::before {
+        font-size: 22px;
+      }
+      & .ql-picker-item[data-value='24px']::before {
+        font-size: 24px;
+      }
+      & .ql-picker-item[data-value='26px']::before {
+        font-size: 26px;
+      }
+      & .ql-picker-item[data-value='28px']::before {
+        font-size: 28px;
+      }
+
+      & .ql-picker-item[data-value='32px']::before {
+        font-size: 32px;
+      }
+      & .ql-picker-item[data-value='36px']::before {
+        font-size: 36px;
+      }
+      
+      & .ql-picker-item[data-value='48px']::before {
+        font-size: 48px;
+      }
+      & .ql-picker-item[data-value='72px']::before {
+        font-size: 72px;
+      }
+    }
+
+    &.ql-wordBox {
+      width: 60px;
+
+      & .ql-picker-label::before,
+      .ql-picker-item::before {
+        content: '默认';
+      }
+
+      & .ql-picker-label[data-value='20px']::before,
+      & .ql-picker-item[data-value='20px']::before {
+        content: '20px';
+      }
+
+      & .ql-picker-label[data-value='22px']::before,
+      & .ql-picker-item[data-value='22px']::before {
+        content: '22px';
+      }
+
+      & .ql-picker-label[data-value='24px']::before,
+      & .ql-picker-item[data-value='24px']::before {
+        content: '24px';
+      }
+
+      & .ql-picker-label[data-value='26px']::before,
+      & .ql-picker-item[data-value='26px']::before {
+        content: '26px';
+      }
+
+      & .ql-picker-label[data-value='28px']::before,
+      & .ql-picker-item[data-value='28px']::before {
+        content: '28px';
+      }
+
+      & .ql-picker-label[data-value='30px']::before,
+      & .ql-picker-item[data-value='30px']::before {
+        content: '30px';
+      }
+
+      & .ql-picker-label[data-value='32px']::before,
+      & .ql-picker-item[data-value='32px']::before {
+        content: '32px';
+      }
+
+      & .ql-picker-label[data-value='34px']::before,
+      & .ql-picker-item[data-value='34px']::before {
+        content: '34px';
+      }
+
+      & .ql-picker-label[data-value='36px']::before,
+      & .ql-picker-item[data-value='36px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='38px']::before,
+      & .ql-picker-item[data-value='38px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='40px']::before,
+      & .ql-picker-item[data-value='40px']::before {
+        content: '40px';
+      }
+
+      & .ql-picker-label[data-value='42px']::before,
+      & .ql-picker-item[data-value='42px']::before {
+        content: '42px';
+      }
+
+      & .ql-picker-label[data-value='44px']::before,
+      & .ql-picker-item[data-value='44px']::before {
+        content: '44px';
+      }
+
+      & .ql-picker-item[data-value='20px']::before {
+        line-height: 20px;
+      }
+
+      & .ql-picker-item[data-value='22px']::before {
+        line-height: 22px;
+      }
+
+      & .ql-picker-item[data-value='24px']::before {
+        line-height: 24px;
+      }
+
+      & .ql-picker-item[data-value='26px']::before {
+        line-height: 26px;
+      }
+
+      & .ql-picker-item[data-value='28px']::before {
+        line-height: 28px;
+      }
+
+      & .ql-picker-item[data-value='30px']::before {
+        line-height: 30px;
+      }
+
+      & .ql-picker-item[data-value='32px']::before {
+        line-height: 32px;
+      }
+
+      & .ql-picker-item[data-value='34px']::before {
+        line-height: 34px;
+      }
+
+      & .ql-picker-item[data-value='36px']::before {
+        line-height: 36px;
+      }
+
+      & .ql-picker-item[data-value='38px']::before {
+        line-height: 38px;
+      }
+
+      & .ql-picker-item[data-value='40px']::before {
+        line-height: 40px;
+      }
+
+      & .ql-picker-item[data-value='44px']::before {
+        line-height: 44px;
+      }
+    }
+  }
+}
+
+.ql-container {
+    .ql-editor {
+    & .ql-size-10px {
+        font-size: 10px;
+    }
+
+    & .ql-size-12px {
+        font-size: 12px;
+    }
+
+    & .ql-size-14px {
+        font-size: 14px;
+    }
+
+    & .ql-size-16px {
+        font-size: 16px;
+    }
+
+    & .ql-size-18px {
+        font-size: 18px;
+    }
+
+    & .ql-size-24px {
+        font-size: 24px;
+    }
+
+    & .ql-size-32px {
+        font-size: 32px;
+    }
+
+    & .ql-size-40px {
+        font-size: 40px;
+    }
+    }
+}
+  
+  .ql-size-10px {
+    font-size: 10px;
+  }
+  .ql-size-12px {
+    font-size: 12px;
+  }
+  .ql-size-14px {
+    font-size: 14px;
+  }
+  .ql-size-16px {
+    font-size: 16px;
+  }
+  .ql-size-18px {
+    font-size: 18px;
+  }
+  .ql-size-24px {
+    font-size: 24px;
+  }
+  .ql-size-32px {
+    font-size: 32px;
+  }
+  .ql-size-40px {
+    font-size: 40px;
+  }

src/pages/SocialRespon/socialRespon/edit.tsx

@@ -1,295 +1,320 @@
 import React, { useEffect, useState, useRef } from 'react';
 import {
-  ProForm,
-  ProFormText,
-  ProFormTextArea,
-  ProFormDatePicker,
+    ProForm,
+    ProFormText,
+    ProFormTextArea,
+    ProFormDatePicker,
+    ProFormDateTimePicker,
 } from '@ant-design/pro-components';
 import { Form, Drawer, Space, Button } from 'antd';
-import ReactQuill from 'react-quill';
+import ReactQuill, { Quill } from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import { useIntl } from '@umijs/max';
 import { upload } from '@/services/socialRespon/socialRespon';
 import moment from 'moment';
+const SizeStyle = Quill.import('attributors/style/size')
+SizeStyle.whitelist = ['6px','8px','9px','10px','11px','12px','14px', '16px', '18px', '20px','22px','24px','26px','28px', '32px', '36px','48px','72px']
+Quill.register(SizeStyle, true)
+
+var Parchment = Quill.import('parchment');
+
+let config = {
+  scope: Parchment.Scope.INLINE,
+  // 会有下拉框列表
+  whitelist: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px']
+  //可设置成没有下拉框的，但会导致无法清除样式
+  // whitelist: ['1px solid #000000']  
+};
+
+let wordBox = new Parchment.Attributor.Style('wordBox', 'line-height', config);
+
+Quill.register(wordBox, true);
 export type SocialResponProps = {
-  onCancel: (flag?: boolean, formVals?: any) => void;
-  onSubmit: (values: any) => Promise<void>;
-  open: boolean;
-  currentRow: any;
-  date: any;
-  title: string;
-  content: string;
-  surface: string;
-  surfaceUrl: string;
+    onCancel: (flag?: boolean, formVals?: any) => void;
+    onSubmit: (values: any) => Promise<void>;
+    open: boolean;
+    currentRow: any;
+    date: any;
+    title: string;
+    content: string;
+    surface: string;
+    surfaceUrl: string;
 };
 
 let toolbarOptions = [
-  ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
-  ['blockquote', 'code-block'],
-  ['link', 'image'],
-  [{ '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': [] }],
-  // [{ 'wordBox': ['20px', '22px', '24px', '26px', '28px', '28px', '30px'] }],
-  [{ wordBox: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px'] }],
-  ['clean'],                                         // 清除格式
-
-];
+    ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
+    ['blockquote', 'code-block'],
+    ['link', 'image'],
+    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+    [{ 'script': 'sub' }, { 'script': 'super' }],      // 上标/下标
+    [{ 'indent': '-1' }, { 'indent': '+1' }],          // 减少缩进/缩进
+    [{ 'direction': 'rtl' }],                         // 文本下划线
+    // [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
+    [{ 'size': ['6px','8px','9px','10px','11px','12px','14px', '16px', '18px', '20px','22px','24px','26px','28px', '32px', '36px','48px','72px']}],
+    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+    [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
+    [{ wordBox: ['20px', '22px', '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px', '42px', '44px'] }],
+    // [{ 'font': [] }],
+    [{ 'align': [] }],
+    ['clean'], // 清除格式
+  ];
 
 const SocialResponForm: React.FC<SocialResponProps> = (props) => {
 
-  const [form] = Form.useForm();
-  const intl = useIntl();
-  let editorRef = useRef<HTMLDivElement>(null)
-  const [editorHtml, setEditorHtml] = useState('');
+    const [form] = Form.useForm();
+    const intl = useIntl();
+    let editorRef = useRef<HTMLDivElement>(null)
+    const [editorHtml, setEditorHtml] = useState('');
 
-  const modules = {
-    toolbar: {
-      container: toolbarOptions, // 使用自定义工具栏选项
-    },
-  };
-  useEffect(() => {
-    form.resetFields();
-    if (!props.open) return;
-    // const { title, content, surface, surfaceUrl, date } = props;
-    if (!props.currentRow) return;
-    const { digest, top, key, content, surface, surfaceUrl, date, title, source, column } = props.currentRow;
-    if (props.currentRow) {
-      form.setFieldsValue({
-        digest,
-        top,
-        key,
-        column,
-        source
-      })
-      // if (top) {
-      //   setCheckTop(1)
-      // } else {
-      //   setCheckTop(0)
-      // }
-    }
+    const modules = {
+        toolbar: {
+            container: toolbarOptions, // 使用自定义工具栏选项
+        },
+    };
+    useEffect(() => {
+        form.resetFields();
+        if (!props.open) return;
+        // const { title, content, surface, surfaceUrl, date } = props;
+        if (!props.currentRow) return;
+        const { digest, top, key, content, surface, surfaceUrl, date, title, source, column,createTime } = props.currentRow;
+        if (props.currentRow) {
+            form.setFieldsValue({
+                digest,
+                top,
+                key,
+                column,
+                source,
+                createTime
+            })
+            // if (top) {
+            //   setCheckTop(1)
+            // } else {
+            //   setCheckTop(0)
+            // }
+        }
 
-    setSurface(surface)
-    form.setFieldsValue({
-      title: title,
-      date: date,
-    })
-    if (surfaceUrl && surface) {
-      setFileList([
-        {
-          uid: surface,
-          thumbUrl: surfaceUrl
+        setSurface(surface)
+        form.setFieldsValue({
+            title: title,
+            date: date,
+        })
+        if (surfaceUrl && surface) {
+            setFileList([
+                {
+                    uid: surface,
+                    thumbUrl: surfaceUrl
+                }
+            ])
         }
-      ])
-    }
-    setEditorHtml(content || '')
+        setEditorHtml(content || '')
 
-  }, [props.open]);
+    }, [props.open]);
 
-  const [fileList, setFileList] = useState<any>([]);
-  const [surface, setSurface] = useState<any>('');
+    const [fileList, setFileList] = useState<any>([]);
+    const [surface, setSurface] = useState<any>('');
 
-  const [editWho, setEditWho] = useState('')
-  const [userIndex, setUserIndex] = useState(0)
-  const [checkTop, setCheckTop] = useState<any>('')
-  const handleOk = async () => {
-    let data = form.getFieldsValue()
-    let val = await form.validateFields()
+    const [editWho, setEditWho] = useState('')
+    const [userIndex, setUserIndex] = useState(0)
+    const [checkTop, setCheckTop] = useState<any>('')
+    const handleOk = async () => {
+        let data = form.getFieldsValue()
+        let val = await form.validateFields()
 
-    let htmlStr = editorHtml?.replaceAll('"', "'")
+        let htmlStr = editorHtml?.replaceAll('"', "'")
 
-    // let content = editor.getContents()
-    // console.log('htmlStr----', htmlStr)
-    // editor.setContents(content)
-    data.date = moment(data.date).format('YYYY-MM-DD');
-    if (checkTop) {
-      data.top = 1;
-    } else {
-      data.top = 0;
-    }
-    // data.top = checkTop;
-    let formData = {
-      ...data,
-      surface,
-      content: htmlStr
-    }
-    form.setFieldsValue({
-      title: '',
-      digest: ""
-    })
-    setFileList([]);
-    setCheckTop(false)
-    setEditorHtml('');
-    props.onSubmit(formData);
-  };
-  const handleCancel = () => {
-    form.setFieldsValue({
-      title: '',
-      digest: "",
-      top: ""
-    })
-    setFileList([]);
-    setCheckTop(false)
-    setEditorHtml('');
-    props.onCancel();
+        // let content = editor.getContents()
+        // console.log('htmlStr----', htmlStr)
+        // editor.setContents(content)
+        data.date = moment(data.date).format('YYYY-MM-DD');
+        data.createTime = moment(data.createTime).format('YYYY-MM-DD HH:mm:ss');
+        if (checkTop) {
+            data.top = 1;
+        } else {
+            data.top = 0;
+        }
+        // data.top = checkTop;
+        let formData = {
+            ...data,
+            surface,
+            content: htmlStr
+        }
+        form.setFieldsValue({
+            title: '',
+            digest: ""
+        })
+        setFileList([]);
+        setCheckTop(false)
+        setEditorHtml('');
+        props.onSubmit(formData);
+    };
+    const handleCancel = () => {
+        form.setFieldsValue({
+            title: '',
+            digest: "",
+            top: ""
+        })
+        setFileList([]);
+        setCheckTop(false)
+        setEditorHtml('');
+        props.onCancel();
 
-  };
-  useEffect(() => {
-    const quill = editorRef.current.getEditor()
-    if (editWho === 'api' && userIndex !== 0) {
-      quill.setSelection(userIndex + 2)
-    }
-  }, [editorHtml])
+    };
+    useEffect(() => {
+        const quill = editorRef.current.getEditor()
+        if (editWho === 'api' && userIndex !== 0) {
+            quill.setSelection(userIndex + 2)
+        }
+    }, [editorHtml])
 
-  const base64ToFile = (base64, fileName = `${Math.random()}`) => {
-    let arr = base64.split(',')
-    console.log(arr[0])
-    let mime = arr[0].match(/:(.*?);/)[1]
-    let bstr = atob(arr[1])
-    let n = bstr.length
-    let u8arr = new Uint8Array(n)
-    while (n--) {
-      u8arr[n] = bstr.charCodeAt(n)
-    }
-    return new File([u8arr], `${fileName}.${mime.split('/')[1]}`, {
-      type: mime,
-    })
-  }
-  const handleChangeQuill = (content, delta, source, editor) => {
-    let quill = editorRef.current.getEditor()
-    quill.focus()
-    let delta_ops = delta.ops
-    let quilContent = editor.getContents()
-    setEditorHtml(content)
-    const range = quill.getSelection()
-    if (range) {
-      if (range.length == 0 && range.index !== 0) {
-        console.log('User cursor is at index', range.index)
-        setUserIndex(range.index)
-      } else {
-        const text = quill.getText(range.index, range.length)
-        console.log('User has highlighted: ', text)
-      }
-    } else {
-      console.log('User cursor is not in editor')
+    const base64ToFile = (base64, fileName = `${Math.random()}`) => {
+        let arr = base64.split(',')
+        console.log(arr[0])
+        let mime = arr[0].match(/:(.*?);/)[1]
+        let bstr = atob(arr[1])
+        let n = bstr.length
+        let u8arr = new Uint8Array(n)
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n)
+        }
+        return new File([u8arr], `${fileName}.${mime.split('/')[1]}`, {
+            type: mime,
+        })
     }
-    setEditWho(source)
-    if (delta_ops && delta_ops.length > 0) {
-      quilContent.ops.map((item) => {
-        if (item.insert) {
-          let imgStr = item.insert.image
-          if (imgStr && imgStr?.includes('data:image/')) {
-            let file = base64ToFile(imgStr)
-            let formData = new FormData()
-            formData.append('file', file)
-            upload(formData).then((res) => {
-              item.insert.image = res.data.url
-              quill.setContents(quilContent)
+    const handleChangeQuill = (content, delta, source, editor) => {
+        let quill = editorRef.current.getEditor()
+        quill.focus()
+        let delta_ops = delta.ops
+        let quilContent = editor.getContents()
+        setEditorHtml(content)
+        const range = quill.getSelection()
+        if (range) {
+            if (range.length == 0 && range.index !== 0) {
+                // console.log('User cursor is at index', range.index)
+                setUserIndex(range.index)
+            } else {
+                const text = quill.getText(range.index, range.length)
+                // console.log('User has highlighted: ', text)
+            }
+        } else {
+            console.log('User cursor is not in editor')
+        }
+        setEditWho(source)
+        if (delta_ops && delta_ops.length > 0) {
+            quilContent.ops.map((item) => {
+                if (item.insert) {
+                    let imgStr = item.insert.image
+                    if (imgStr && imgStr?.includes('data:image/')) {
+                        let file = base64ToFile(imgStr)
+                        let formData = new FormData()
+                        formData.append('file', file)
+                        upload(formData).then((res) => {
+                            item.insert.image = res.data.url
+                            quill.setContents(quilContent)
+                        })
+                    }
+                }
             })
-          }
         }
-      })
     }
-  }
 
 
 
-  return (
-    <Drawer
-      width={'80%'}
-      title={props.currentRow ? '文章编辑' : '新建文章'}
-      forceRender
-      open={props.open}
-      destroyOnClose
-      onClose={handleCancel}
-      extra={
-        <Space>
-          <Button onClick={handleCancel}>取消</Button>
-          <Button type="primary" onClick={handleOk}>确认</Button>
-        </Space>
-      }
-    >
-      <ProForm
-        form={form}
-        grid={true}
-        submitter={false}
-        layout="horizontal"
-      >
-        <ProFormText
-          name="title"
-          label='标题'
-          labelCol={{
-            style: { width: 95 }
-          }}
-          placeholder='请输入标题'
-          rules={[
-            {
-              required: true,
-              message: '请输入标题!',
-            },
-          ]}
-        />
-        <ProFormTextArea
-          name="digest"
-          label='摘要'
-          labelCol={{
-            style: { width: 95 }
-          }}
-          placeholder={'请输入摘要'}
-        />
-        <ProFormDatePicker
-          name="date"
-          label='展示日期'
-          fieldProps={{
-            format: (value) => value.format('YYYY-MM-DD'),
-          }}
-          labelCol={{
-            style: { width: 95 }
-          }}
-          rules={[
-            {
-              required: true
+    return (
+        <Drawer
+            width={'80%'}
+            title={props.currentRow ? '文章编辑' : '新建文章'}
+            forceRender
+            open={props.open}
+            destroyOnClose
+            onClose={handleCancel}
+            extra={
+                <Space>
+                    <Button onClick={handleCancel}>取消</Button>
+                    <Button type="primary" onClick={handleOk}>确认</Button>
+                </Space>
             }
-          ]
-          }
-        />
-
-        <ProFormText
-          name="key"
-          label='网页关键字'
-          labelCol={{
-            style: { width: 95 }
-          }}
-          placeholder={'请输入页面关键字'}
-        />
+        >
+            <ProForm
+                form={form}
+                grid={true}
+                submitter={false}
+                layout="horizontal"
+            >
+                <ProFormText
+                    name="title"
+                    label='标题'
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    placeholder='请输入标题'
+                    rules={[
+                        {
+                            required: true,
+                            message: '请输入标题!',
+                        },
+                    ]}
+                />
+                <ProFormTextArea
+                    name="digest"
+                    label='摘要'
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    placeholder={'请输入摘要'}
+                />
+                <ProFormDatePicker
+                    name="date"
+                    label='展示日期'
+                    fieldProps={{
+                        format: (value) => value.format('YYYY-MM-DD'),
+                    }}
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    rules={[
+                        {
+                            required: true
+                        }
+                    ]
+                    }
+                />
+                <ProFormDateTimePicker
+                    name="createTime"
+                    label='发稿时间'
+                    fieldProps={{ format: (value) => value.format('YYYY-MM-DD HH:mm:ss') }}
+                    labelCol={{ style: { width: 95 } }}
+                    rules={[{ required: true }]}
+                />
+                <ProFormText
+                    name="key"
+                    label='网页关键字'
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    placeholder={'请输入页面关键字'}
+                />
 
-        <ProFormText
-          name="source"
-          label='来源'
-          labelCol={{
-            style: { width: 95 }
-          }}
-          placeholder={'中泽集团'}
-          initialValue={'中泽集团'}
-        />
+                <ProFormText
+                    name="source"
+                    label='来源'
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                    placeholder={'中泽集团'}
+                    initialValue={'中泽集团'}
+                />
 
-        <ProForm.Item
-          label={'文章内容'}
-          labelCol={{
-            style: { width: 95 }
-          }}
-        >
-          <ReactQuill ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
-        </ProForm.Item>
-      </ProForm>
-    </Drawer>
-  );
+                <ProForm.Item
+                    label={'文章内容'}
+                    labelCol={{
+                        style: { width: 95 }
+                    }}
+                >
+                    <ReactQuill ref={editorRef} placeholder='请输入...' theme='snow' className="ql-editor" modules={modules} value={editorHtml} onChange={handleChangeQuill} />
+                </ProForm.Item>
+            </ProForm>
+        </Drawer>
+    );
 };
 
 export default SocialResponForm;

src/pages/SocialRespon/socialRespon/index.less

@@ -1,3 +1,336 @@
 .ant-pro-table-list-toolbar-title{
     display:none;
-}
+}
+
+.ql-toolbar {
+  &.ql-snow .ql-picker {
+    &.ql-size {
+      width: 60px;
+
+      & .ql-picker-label::before,
+      .ql-picker-item::before {
+        content: '默认';
+      }
+      & .ql-picker-label[data-value='6px']::before,
+      & .ql-picker-item[data-value='6px']::before {
+        content: '6px';
+      }
+      & .ql-picker-label[data-value='8px']::before,
+      & .ql-picker-item[data-value='8px']::before {
+        content: '8px';
+      }
+      & .ql-picker-label[data-value='9px']::before,
+      & .ql-picker-item[data-value='9px']::before {
+        content: '9px';
+      }
+      & .ql-picker-label[data-value='10px']::before,
+      & .ql-picker-item[data-value='10px']::before {
+        content: '10px';
+      }
+      & .ql-picker-label[data-value='11px']::before,
+      & .ql-picker-item[data-value='11px']::before {
+        content: '11px';
+      }
+
+      & .ql-picker-label[data-value='12px']::before,
+      & .ql-picker-item[data-value='12px']::before {
+        content: '12px';
+      }
+
+      & .ql-picker-label[data-value='14px']::before,
+      & .ql-picker-item[data-value='14px']::before {
+        content: '14px';
+      }
+
+      & .ql-picker-label[data-value='16px']::before,
+      & .ql-picker-item[data-value='16px']::before {
+        content: '16px';
+      }
+
+      & .ql-picker-label[data-value='18px']::before,
+      & .ql-picker-item[data-value='18px']::before {
+        content: '18px';
+      }
+      & .ql-picker-label[data-value='20px']::before,
+      & .ql-picker-item[data-value='20px']::before {
+        content: '20px';
+      }
+      & .ql-picker-label[data-value='22px']::before,
+      & .ql-picker-item[data-value='22px']::before {
+        content: '22px';
+      }
+      & .ql-picker-label[data-value='24px']::before,
+      & .ql-picker-item[data-value='24px']::before {
+        content: '24px';
+      }
+      & .ql-picker-label[data-value='26px']::before,
+      & .ql-picker-item[data-value='26px']::before {
+        content: '26px';
+      }
+      & .ql-picker-label[data-value='28px']::before,
+      & .ql-picker-item[data-value='28px']::before {
+        content: '28px';
+      }
+
+      & .ql-picker-label[data-value='32px']::before,
+      & .ql-picker-item[data-value='32px']::before {
+        content: '32px';
+      }
+      & .ql-picker-label[data-value='36px']::before,
+      & .ql-picker-item[data-value='36px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='48px']::before,
+      & .ql-picker-item[data-value='48px']::before {
+        content: '48px';
+      }
+      & .ql-picker-label[data-value='72px']::before,
+      & .ql-picker-item[data-value='72px']::before {
+        content: '72px';
+      }
+
+      & .ql-picker-item[data-value='6px']::before {
+        font-size: 6px;
+      }
+      & .ql-picker-item[data-value='8px']::before {
+        font-size: 8px;
+      }
+      & .ql-picker-item[data-value='9px']::before {
+        font-size: 9px;
+      }
+      & .ql-picker-item[data-value='10px']::before {
+        font-size: 10px;
+      }
+      & .ql-picker-item[data-value='11px']::before {
+        font-size: 11px;
+      }
+      & .ql-picker-item[data-value='12px']::before {
+        font-size: 12px;
+      }
+      & .ql-picker-item[data-value='14px']::before {
+        font-size: 14px;
+      }
+
+      & .ql-picker-item[data-value='16px']::before {
+        font-size: 16px;
+      }
+
+      & .ql-picker-item[data-value='18px']::before {
+        font-size: 18px;
+      }
+      & .ql-picker-item[data-value='20px']::before {
+        font-size: 20px;
+      }      
+      & .ql-picker-item[data-value='22px']::before {
+        font-size: 22px;
+      }
+      & .ql-picker-item[data-value='24px']::before {
+        font-size: 24px;
+      }
+      & .ql-picker-item[data-value='26px']::before {
+        font-size: 26px;
+      }
+      & .ql-picker-item[data-value='28px']::before {
+        font-size: 28px;
+      }
+
+      & .ql-picker-item[data-value='32px']::before {
+        font-size: 32px;
+      }
+      & .ql-picker-item[data-value='36px']::before {
+        font-size: 36px;
+      }
+      
+      & .ql-picker-item[data-value='48px']::before {
+        font-size: 48px;
+      }
+      & .ql-picker-item[data-value='72px']::before {
+        font-size: 72px;
+      }
+    }
+
+    &.ql-wordBox {
+      width: 60px;
+
+      & .ql-picker-label::before,
+      .ql-picker-item::before {
+        content: '默认';
+      }
+
+      & .ql-picker-label[data-value='20px']::before,
+      & .ql-picker-item[data-value='20px']::before {
+        content: '20px';
+      }
+
+      & .ql-picker-label[data-value='22px']::before,
+      & .ql-picker-item[data-value='22px']::before {
+        content: '22px';
+      }
+
+      & .ql-picker-label[data-value='24px']::before,
+      & .ql-picker-item[data-value='24px']::before {
+        content: '24px';
+      }
+
+      & .ql-picker-label[data-value='26px']::before,
+      & .ql-picker-item[data-value='26px']::before {
+        content: '26px';
+      }
+
+      & .ql-picker-label[data-value='28px']::before,
+      & .ql-picker-item[data-value='28px']::before {
+        content: '28px';
+      }
+
+      & .ql-picker-label[data-value='30px']::before,
+      & .ql-picker-item[data-value='30px']::before {
+        content: '30px';
+      }
+
+      & .ql-picker-label[data-value='32px']::before,
+      & .ql-picker-item[data-value='32px']::before {
+        content: '32px';
+      }
+
+      & .ql-picker-label[data-value='34px']::before,
+      & .ql-picker-item[data-value='34px']::before {
+        content: '34px';
+      }
+
+      & .ql-picker-label[data-value='36px']::before,
+      & .ql-picker-item[data-value='36px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='38px']::before,
+      & .ql-picker-item[data-value='38px']::before {
+        content: '36px';
+      }
+
+      & .ql-picker-label[data-value='40px']::before,
+      & .ql-picker-item[data-value='40px']::before {
+        content: '40px';
+      }
+
+      & .ql-picker-label[data-value='42px']::before,
+      & .ql-picker-item[data-value='42px']::before {
+        content: '42px';
+      }
+
+      & .ql-picker-label[data-value='44px']::before,
+      & .ql-picker-item[data-value='44px']::before {
+        content: '44px';
+      }
+
+      & .ql-picker-item[data-value='20px']::before {
+        line-height: 20px;
+      }
+
+      & .ql-picker-item[data-value='22px']::before {
+        line-height: 22px;
+      }
+
+      & .ql-picker-item[data-value='24px']::before {
+        line-height: 24px;
+      }
+
+      & .ql-picker-item[data-value='26px']::before {
+        line-height: 26px;
+      }
+
+      & .ql-picker-item[data-value='28px']::before {
+        line-height: 28px;
+      }
+
+      & .ql-picker-item[data-value='30px']::before {
+        line-height: 30px;
+      }
+
+      & .ql-picker-item[data-value='32px']::before {
+        line-height: 32px;
+      }
+
+      & .ql-picker-item[data-value='34px']::before {
+        line-height: 34px;
+      }
+
+      & .ql-picker-item[data-value='36px']::before {
+        line-height: 36px;
+      }
+
+      & .ql-picker-item[data-value='38px']::before {
+        line-height: 38px;
+      }
+
+      & .ql-picker-item[data-value='40px']::before {
+        line-height: 40px;
+      }
+
+      & .ql-picker-item[data-value='44px']::before {
+        line-height: 44px;
+      }
+    }
+  }
+}
+
+.ql-container {
+    .ql-editor {
+    & .ql-size-10px {
+        font-size: 10px;
+    }
+
+    & .ql-size-12px {
+        font-size: 12px;
+    }
+
+    & .ql-size-14px {
+        font-size: 14px;
+    }
+
+    & .ql-size-16px {
+        font-size: 16px;
+    }
+
+    & .ql-size-18px {
+        font-size: 18px;
+    }
+
+    & .ql-size-24px {
+        font-size: 24px;
+    }
+
+    & .ql-size-32px {
+        font-size: 32px;
+    }
+
+    & .ql-size-40px {
+        font-size: 40px;
+    }
+    }
+}
+  
+  .ql-size-10px {
+    font-size: 10px;
+  }
+  .ql-size-12px {
+    font-size: 12px;
+  }
+  .ql-size-14px {
+    font-size: 14px;
+  }
+  .ql-size-16px {
+    font-size: 16px;
+  }
+  .ql-size-18px {
+    font-size: 18px;
+  }
+  .ql-size-24px {
+    font-size: 24px;
+  }
+  .ql-size-32px {
+    font-size: 32px;
+  }
+  .ql-size-40px {
+    font-size: 40px;
+  }

src/services/JoinZZ/biddingDocument.ts

@@ -52,7 +52,7 @@ export async function pushBiddingDocumentDetail(params: any) {
 
 //发布全部
 export async function pushBiddingDocumentDetailAll(params: any) {
-  return request('/api/staticize/static/articleDetail?type=biddingDocument&uuid='+params.uuid, {
+  return request('/api/staticize/static/articleDetail?type=biddingDocument', {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json;charset=UTF-8',