liuc/fe_portal_manage_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复wangeditor 集成报错

Browse Source
This commit is contained in:
linxd
2025-08-11 11:01:36 +08:00
parent c2e62dfc62
commit d882e9bd55
4 changed files with 67 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config/config.ts
View File

@ -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,

35
src/components/WangEidtor/WangEidtor.tsx
View File

@ -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) => {

73
src/pages/policyManage/PolicyManageForm.tsx
View File

@ -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' })}
/>

1
src/pages/policyManage/policyManage.tsx
View File

@ -479,6 +479,7 @@ const PolicyManage: React.FC = () => {
onCancel={handleModalCancel}
width={uiconfig.Modal.width}
maskClosable={false}
forceRender
destroyOnClose
footer={
isViewMode