修改css样式

src/pages/Memory/components/Quill.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import ReactQuill from "react-quill";
 import 'react-quill/dist/quill.snow.css';
+import 'react-quill/dist/quill.bubble.css';
+import styles from '../index.less'
 
 export interface Props {
   onChange: (value?: any) => void;
   value: any;
   readonly: boolean;
+  theme: string;
 }
 
 const modules = {
   toolbar: [
     [{'header': [1, 2, false]}, 'bold', 'italic', 'blockquote', 'code-block', 'link'],
-    [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'},'image'],
+    [{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}, 'image'],
   ],
 };
 
@@ -19,7 +22,7 @@ const formats = [
   'header',
   'bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block',
   'list', 'bullet', 'indent',
-  'link','image'
+  'link', 'image'
 ];
 
 const Quill: React.FC<Props> = (props) => {
@@ -27,13 +30,15 @@ const Quill: React.FC<Props> = (props) => {
     value,
     onChange,
     readonly,
+    theme,
   } = props;
 
 
   return (
     <ReactQuill
+      className={styles.customImg}
       readOnly={readonly}
-      theme="snow"
+      theme={theme}
       modules={modules}
       formats={formats}
       value={value}

src/pages/Memory/components/UpdateForm.tsx

@@ -152,6 +152,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
       <div>
         <h4>正面</h4>
         <Quill
+          theme={"snow"}
           readonly={false}
           onChange={(value) => {
             dealHtml(value, (html: string) => {
@@ -164,6 +165,7 @@ const UpdateForm: React.FC<UpdateFormProps> = (props) => {
         <p />
         <h4>反面</h4>
         <Quill
+          theme={"snow"}
           readonly={false}
           onChange={(value) => {
             dealHtml(value, (html: string) => {

src/pages/Memory/index.less

@@ -14,8 +14,17 @@
 .minHeight{
   min-height: 100px;
 }
-.ant-divider-horizontal.ant-divider-with-text::before,
-.ant-divider-horizontal.ant-divider-with-text::after
-{
-  border-top: 1px solid #ba5656;
+
+.customImg{
+  :global {
+    .ql-snow .ql-editor img{
+      max-height: 400px;
+    }
+    /* Bubble Theme */
+    .ql-bubble .ql-editor {
+      border: 1px solid #cccccc;
+      //border-radius: 0.5em;
+    }
+  }
 }
+

src/pages/Memory/index.tsx

@@ -179,6 +179,8 @@ const TableList: React.FC<{}> = () => {
     } else {
       setState({showBack: false});
     }
+    // 隐藏更多按钮
+    setShowMore(false);
   }, [memory.front]);
 
   return (
@@ -205,15 +207,24 @@ const TableList: React.FC<{}> = () => {
 
       {state.step === Step.MEMORY ? (
         <div>
-          问题:
-          <p/>
-          <Quill readonly onChange={() => {
-          }} value={memory.front}/>
+          正面：
+          <p></p>
+          <Quill
+            theme={"bubble"}
+            readonly
+            onChange={() => {
+            }} value={memory.front}/>
           <p/>
           {state.showBack ? (
+
             <div>
-              <Quill readonly onChange={() => {
-              }} value={memory.back}/>
+              反面：
+              <p></p>
+              <Quill
+                theme={"bubble"}
+                readonly
+                onChange={() => {
+                }} value={memory.back}/>
               <p/>
               <div className={styles.divBottom}>
                 <Button
@@ -233,7 +244,7 @@ const TableList: React.FC<{}> = () => {
                     memorySuccess(2);
                   }}
                 >
-                  一般
+                  <b>&nbsp;&nbsp;一般&nbsp;&nbsp;</b>
                 </Button>
                 <span> </span>
                 <Button
@@ -332,7 +343,7 @@ const TableList: React.FC<{}> = () => {
                   setState({showBack: true});
                 }}
               >
-                显示答案
+                显示反面
               </Button>
             </div>
           )}