From d882e9bd55eb60dfc08545cdf0a81a64957f7077 Mon Sep 17 00:00:00 2001
From: linxd <544554903@qq.com>
Date: Mon, 11 Aug 2025 11:01:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dwangeditor=20=E9=9B=86?=
 =?UTF-8?q?=E6=88=90=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/config.ts                            |  2 +-
 src/components/WangEidtor/WangEidtor.tsx    | 35 +++-------
 src/pages/policyManage/PolicyManageForm.tsx | 73 ++++++++++++++++-----
 src/pages/policyManage/policyManage.tsx     |  1 +
 4 files changed, 67 insertions(+), 44 deletions(-)

diff --git a/config/config.ts b/config/config.ts
index 746ade6..2740996 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -1,5 +1,5 @@
 import { defineConfig } from 'umi';
-import defaultSettings,{antdTheme} from './defaultSettings';
+import defaultSettings, { antdTheme } from './defaultSettings';
 import PageRoutes from './router.config'
 export default defineConfig({
   hash: true,
diff --git a/src/components/WangEidtor/WangEidtor.tsx b/src/components/WangEidtor/WangEidtor.tsx
index ebc6135..2394721 100644
--- a/src/components/WangEidtor/WangEidtor.tsx
+++ b/src/components/WangEidtor/WangEidtor.tsx
@@ -74,34 +74,17 @@ const WangEditor = forwardRef<any, WangEditorProps>(
         placeholder || (language === 'zh-CN' ? '请输入内容...' : 'Please enter content...'),
       readOnly,
     };
-
-    // 监听value变化
+    // 工具：把纯文本包成合法 HTML，避免 Slate 只拿到 text node
+    function normalizeHtml(input?: string) {
+      const s = (input ?? '').toString();
+      if (!s) return '';
+      return /[<>]/.test(s) ? s : `<p>${s}</p>`;
+    }
     useEffect(() => {
-      // ✅ 等编辑器准备好之后才更新 html
-      if (editor && value !== html) {
-        try {
-          const current = editor.getHtml();
-          if (value !== current) {
-            setHtml(value);
-          }
-        } catch (e) {
-          console.warn('Editor尚未准备好，忽略更新', e);
-        }
-      }
-    }, [value, editor]);
+      setHtml(normalizeHtml(value)); // ✅ 外部值变化 → 直接同步受控值
+    }, [value]);
 
-    // 及时销毁editor实例，重要！
-    useEffect(() => {
-      return () => {
-        if (editor) {
-          try {
-            editor.destroy();
-          } catch (err) {
-            console.warn('销毁 editor 失败:', err);
-          }
-        }
-      };
-    }, []);
+    useEffect(() => () => editor?.destroy(), [editor]); // ✅ 正确销毁
 
     // 处理编辑器内容变化
     const handleChange = (newEditor: IDomEditor) => {
diff --git a/src/pages/policyManage/PolicyManageForm.tsx b/src/pages/policyManage/PolicyManageForm.tsx
index 9a3cd0c..07fbe13 100644
--- a/src/pages/policyManage/PolicyManageForm.tsx
+++ b/src/pages/policyManage/PolicyManageForm.tsx
@@ -35,7 +35,9 @@ const PolicyManageForm: React.FC<PolicyManageFormProps> = ({ id, isEdit, onSucce
             contentEn: detail.contentEn,
           });
         } else {
-          message.error(response.message || intl.formatMessage({ id: 'policyManage.fetchDetailFailed' }));
+          message.error(
+            response.message || intl.formatMessage({ id: 'policyManage.fetchDetailFailed' }),
+          );
         }
       } catch (error) {
         console.error('获取政策详情失败:', error);
@@ -102,14 +104,19 @@ const PolicyManageForm: React.FC<PolicyManageFormProps> = ({ id, isEdit, onSucce
       }
 
       if (response && response.success) {
-        message.success(isEdit
-          ? intl.formatMessage({ id: 'policyManage.form.updateSuccess' })
-          : intl.formatMessage({ id: 'policyManage.form.addSuccess' }));
+        message.success(
+          isEdit
+            ? intl.formatMessage({ id: 'policyManage.form.updateSuccess' })
+            : intl.formatMessage({ id: 'policyManage.form.addSuccess' }),
+        );
         onSuccess(); // 回调父组件
       } else {
-        message.error(response.message || (isEdit
-          ? intl.formatMessage({ id: 'policyManage.form.updateFailed' })
-          : intl.formatMessage({ id: 'policyManage.form.addFailed' })));
+        message.error(
+          response.message ||
+            (isEdit
+              ? intl.formatMessage({ id: 'policyManage.form.updateFailed' })
+              : intl.formatMessage({ id: 'policyManage.form.addFailed' })),
+        );
       }
     } catch (error: any) {
       console.error('表单验证或提交失败:', error);
@@ -131,45 +138,77 @@ const PolicyManageForm: React.FC<PolicyManageFormProps> = ({ id, isEdit, onSucce
         </Form.Item>
 
         <Tabs activeKey={activeTabKey} onChange={handleTabChange}>
-          <TabPane tab={intl.formatMessage({ id: 'policyManage.form.chineseTab' })} key="zh" forceRender={true}>
+          <TabPane
+            tab={intl.formatMessage({ id: 'policyManage.form.chineseTab' })}
+            key="zh"
+            forceRender={true}
+          >
             <Form.Item
               name="titleZh"
               label={intl.formatMessage({ id: 'policyManage.form.titleZh' })}
-              rules={[{ required: true, message: intl.formatMessage({ id: 'policyManage.form.titleZhRequired' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'policyManage.form.titleZhRequired' }),
+                },
+              ]}
             >
-              <Input placeholder={intl.formatMessage({ id: 'policyManage.form.titleZhPlaceholder' })} />
+              <Input
+                placeholder={intl.formatMessage({ id: 'policyManage.form.titleZhPlaceholder' })}
+              />
             </Form.Item>
 
             <Form.Item
               name="contentZh"
-               valuePropName="value"
               label={intl.formatMessage({ id: 'policyManage.form.contentZh' })}
-              rules={[{ required: true, message: intl.formatMessage({ id: 'policyManage.form.contentZhRequired' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'policyManage.form.contentZhRequired' }),
+                },
+              ]}
             >
               <WangEditor
+                key={`contentZh-${id || 'new'}`}
                 language="zh-CN"
                 height="300px"
                 placeholder={intl.formatMessage({ id: 'policyManage.form.contentZhPlaceholder' })}
               />
             </Form.Item>
           </TabPane>
-          <TabPane tab={intl.formatMessage({ id: 'policyManage.form.englishTab' })} key="en" forceRender={true}>
+          <TabPane
+            tab={intl.formatMessage({ id: 'policyManage.form.englishTab' })}
+            key="en"
+            forceRender={true}
+          >
             <Form.Item
               name="titleEn"
               label={intl.formatMessage({ id: 'policyManage.form.titleEn' })}
-              rules={[{ required: true, message: intl.formatMessage({ id: 'policyManage.form.titleEnRequired' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'policyManage.form.titleEnRequired' }),
+                },
+              ]}
             >
-              <Input placeholder={intl.formatMessage({ id: 'policyManage.form.titleEnPlaceholder' })} />
+              <Input
+                placeholder={intl.formatMessage({ id: 'policyManage.form.titleEnPlaceholder' })}
+              />
             </Form.Item>
 
             <Form.Item
               name="contentEn"
-               valuePropName="value"
               label={intl.formatMessage({ id: 'policyManage.form.contentEn' })}
-              rules={[{ required: true, message: intl.formatMessage({ id: 'policyManage.form.contentEnRequired' }) }]}
+              rules={[
+                {
+                  required: true,
+                  message: intl.formatMessage({ id: 'policyManage.form.contentEnRequired' }),
+                },
+              ]}
             >
               <WangEditor
                 language="en"
+                key={`contentEn-${id || 'new'}`}
                 height="300px"
                 placeholder={intl.formatMessage({ id: 'policyManage.form.contentEnPlaceholder' })}
               />
diff --git a/src/pages/policyManage/policyManage.tsx b/src/pages/policyManage/policyManage.tsx
index 5c5fc8c..cc7fb6f 100644
--- a/src/pages/policyManage/policyManage.tsx
+++ b/src/pages/policyManage/policyManage.tsx
@@ -479,6 +479,7 @@ const PolicyManage: React.FC = () => {
         onCancel={handleModalCancel}
         width={uiconfig.Modal.width}
         maskClosable={false}
+        forceRender
         destroyOnClose
         footer={
           isViewMode