upp

后台/src/components/Z_RicjText/index.module.scss

@@ -19,7 +19,8 @@
           cursor: pointer;
           color: var(--themeColor);
         }
-        .upImgBoxNo{
+
+        .upImgBoxNo {
           display: none;
         }
 
@@ -40,11 +41,13 @@
       opacity: 1;
     }
 
-    .bf-media {
+    .bf-media .bf-image {
+      float: initial !important;
       display: block;
       margin: 10px auto;
-      max-width: 300px;
-      max-height: 300px;
+      max-width: 500px;
+      max-height: 500px;
     }
+
   }
 }

后台/src/components/Z_RicjText/index.tsx

@@ -22,34 +22,37 @@ import { B2_APIupFile } from "@/store/action/B2Goods";
 import { fileDomInitialFu } from "@/utils/domShow";
 import { baseURL } from "@/utils/http";
 
+import { forwardRef, useImperativeHandle } from "react";
+
 type Props = {
-  check: boolean;
-  dirCode: string;
-  richTxt: string;
-  setRichTxt: (val: string) => void;
-  isLook: boolean;
+  check: boolean; //表单校验，为fasle表示不校验
+  dirCode: string; //文件的code码
+  isLook: boolean; //是否是查看进来
+  ref: any; //当前自己的ref，给父组件调用
 };
 
-function RichText({ check, dirCode, richTxt, setRichTxt, isLook }: Props) {
+function RichText({ check, dirCode, isLook }: Props, ref: any) {
   // 添加 上传 图片的dom
   useEffect(() => {
-    setTimeout(() => {
-      const dom = document.querySelector(".bf-controlbar")!;
-      const div = document.createElement("div");
-      div.className = isLook ? "upImgBoxNo" : "upImgBox";
-      div.title = "上传图片";
-      div.innerHTML = "上传图片";
-      div.onclick = async () => {
-        myInput.current?.click();
-      };
-      dom.appendChild(div);
-    }, 200);
+    if (!isLook) {
+      setTimeout(() => {
+        const dom = document.querySelector(".bf-controlbar")!;
+        const div = document.createElement("div");
+        div.className = "upImgBox";
+        // div.title = "上传图片";
+        div.innerHTML = "上传图片";
+        div.onclick = async () => {
+          myInput.current?.click();
+        };
+        dom.appendChild(div);
+      }, 200);
+    }
   }, [isLook]);
 
   // 编辑器文本
   const [editorValue, setEditorValue] = useState(
     // 初始内容
-    BraftEditor.createEditorState(richTxt)
+    BraftEditor.createEditorState("")
   );
 
   // 判断 富文本是否为空
@@ -63,25 +66,10 @@ function RichText({ check, dirCode, richTxt, setRichTxt, isLook }: Props) {
     } else return false;
   }, [editorValue]);
 
-  // 回显数据
-  const timeRef = useRef(false);
-
-  useEffect(() => {
-    if (timeRef.current) return;
-    if (richTxt) {
-      setEditorValue(BraftEditor.createEditorState(richTxt));
-      timeRef.current = true;
-    }
-  }, [richTxt]);
-
   // 富文本信息改变的回调
-  const handleChange = useCallback(
-    (e: any) => {
-      setEditorValue(e);
-      setRichTxt(editorValue.toHTML());
-    },
-    [editorValue, setRichTxt]
-  );
+  const handleChange = useCallback((e: any) => {
+    setEditorValue(e);
+  }, []);
 
   const myInput = useRef<HTMLInputElement>(null);
 
@@ -134,6 +122,22 @@ function RichText({ check, dirCode, richTxt, setRichTxt, isLook }: Props) {
     [dirCode, editorValue]
   );
 
+  // 让父组件调用的 回显 富文本
+  const ritxtShowFu = useCallback((val: string) => {
+    setEditorValue(BraftEditor.createEditorState(val));
+  }, []);
+
+  // 让父组件调用的返回 富文本信息 和 表单校验
+  const fatherBtnOkFu = useCallback(() => {
+    return { val: editorValue.toHTML(), flag: isTxtFlag };
+  }, [editorValue, isTxtFlag]);
+
+  // 可以让父组件调用子组件的方法
+  useImperativeHandle(ref, () => ({
+    ritxtShowFu,
+    fatherBtnOkFu,
+  }));
+
   return (
     <div className={styles.RichText}>
       <input
@@ -150,6 +154,7 @@ function RichText({ check, dirCode, richTxt, setRichTxt, isLook }: Props) {
           placeholder="请输入内容"
           value={editorValue}
           onChange={(e) => handleChange(e)}
+          imageControls={["remove"]}
         />
       </div>
       <div
@@ -160,18 +165,10 @@ function RichText({ check, dirCode, richTxt, setRichTxt, isLook }: Props) {
       >
         请输入正文!
       </div>
-
-      {/* 编辑器内容 */}
-      {/* <br />
-      <button onClick={btnOk}>点击确定获取文本</button>
-      <br /> */}
-      {/* 插入图片 */}
-      {/* <br />
-      <button onClick={insertTextFu}>在光标位置插入内容</button> */}
     </div>
   );
 }
 
-const MemoRichText = React.memo(RichText);
+// const MemoRichText = React.memo(RichText);
 
-export default MemoRichText;
+export default forwardRef(RichText);

后台/src/pages/B2Goods/B2Edit/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import styles from "./index.module.scss";
 import classNames from "classnames";
 import { Button, Form, FormInstance, Input, Popconfirm, Select } from "antd";
@@ -31,7 +25,8 @@ function B2Edit({ editId, isLook, closeFu, editFu, addFu, myType }: Props) {
       FormBoxRef.current?.setFieldsValue(res.data);
       setCover(res.data.thumb);
 
-      setRichTxt(res.data.content);
+      // 调用富文本子组件的函数，回显数据
+      ricjTxtRef.current.ritxtShowFu(res.data.content);
     }
   }, []);
 
@@ -56,26 +51,11 @@ function B2Edit({ editId, isLook, closeFu, editFu, addFu, myType }: Props) {
   // 图片
   const [cover, setCover] = useState("");
 
-  // 富文本的值
-  const [richTxt, setRichTxt] = useState("");
-
   // 没有通过校验
   const onFinishFailed = useCallback(() => {
     setCheck(true);
   }, []);
 
-  // 判断 富文本是否为空
-  const isTxtFlag = useMemo(() => {
-    if (
-      richTxt
-        .replaceAll("<p>", "")
-        .replaceAll("</p>", "")
-        .replaceAll(" ", "") === ""
-    ) {
-      return true;
-    } else return false;
-  }, [richTxt]);
-
   // 通过校验点击确定
   const onFinish = useCallback(
     async (value: any) => {
@@ -85,13 +65,15 @@ function B2Edit({ editId, isLook, closeFu, editFu, addFu, myType }: Props) {
       if (!cover) return;
 
       // 富文本 为空
-      if (isTxtFlag) return;
+      const { val, flag } = ricjTxtRef.current.fatherBtnOkFu();
+
+      if (flag) return;
 
       const obj = {
         ...value,
         id: editId > 0 ? editId : null,
         thumb: cover,
-        content: richTxt,
+        content: val,
       };
       const res = await B2_APIsave(obj);
       if (res.code === 0) {
@@ -102,9 +84,12 @@ function B2Edit({ editId, isLook, closeFu, editFu, addFu, myType }: Props) {
       }
       // console.log("通过校验，点击确定", res);
     },
-    [addFu, closeFu, cover, editFu, editId, isTxtFlag, richTxt]
+    [addFu, closeFu, cover, editFu, editId]
   );
 
+  // 富文本的ref
+  const ricjTxtRef = useRef<any>(null);
+
   return (
     <div className={styles.B2Edit}>
       <div
@@ -152,10 +137,9 @@ function B2Edit({ editId, isLook, closeFu, editFu, addFu, myType }: Props) {
               </div>
               <div className="e_rowR">
                 <RichText
+                  ref={ricjTxtRef}
                   check={check}
                   dirCode="myGoods"
-                  richTxt={richTxt}
-                  setRichTxt={(val) => setRichTxt(val)}
                   isLook={isLook}
                 />
               </div>