From 0284ff93129252683da82ed01f0e60f81839761c Mon Sep 17 00:00:00 2001
From: zjk <852185829@qq.com>
Date: 星期一, 31 八月 2026 09:24:19 +0800
Subject: [PATCH] fix(strategy-rich-text): 修复纯文本富内容的换行展示问题
---
management/src/pages/strategyManagement/addAndEdit.jsx | 31 +++++++++++++++++++++++++++++--
miniprogram/pages/strategy/detail.vue | 16 ++++++++++++++--
2 files changed, 43 insertions(+), 4 deletions(-)
diff --git a/management/src/pages/strategyManagement/addAndEdit.jsx b/management/src/pages/strategyManagement/addAndEdit.jsx
index adecad1..8a6f7e8 100644
--- a/management/src/pages/strategyManagement/addAndEdit.jsx
+++ b/management/src/pages/strategyManagement/addAndEdit.jsx
@@ -33,6 +33,17 @@
const id = searchParams.get('id');
const mode = searchParams.get('mode') || 'add'; // add, edit, detail
const isReadOnly = mode === 'detail';
+ // 兼容纯文本换行，避免预览和小程序详情里被浏览器当成普通空白折叠
+ const formatRichTextPreviewContent = (html) => {
+ const content = String(html || '');
+ if (!content) {
+ return '';
+ }
+ if (/<[^>]+>/.test(content)) {
+ return content;
+ }
+ return content.replace(/\r\n|\r|\n/g, '<br />');
+ };
// 上传前验证 - 图片
const beforeUploadImage = (file) => {
@@ -355,7 +366,7 @@
sort: values.sortOrder || 45,
detailImages: detailImagesStr, // 传字符串（逗号分隔）
type: type,
- content: strategyContent.content,
+ content: formatRichTextPreviewContent(strategyContent.content),
};
let success = false;
@@ -510,7 +521,23 @@
readOnly={isReadOnly}
/>
</Form.Item>
-
+ <Form.Item label="内容预览">
+ <div
+ style={{
+ width: '100%',
+ minHeight: '200px',
+ maxHeight: '320px',
+ overflowY: 'auto',
+ padding: '12px',
+ border: '1px solid #f0f0f0',
+ borderRadius: '6px',
+ background: '#fff',
+ }}
+ dangerouslySetInnerHTML={{
+ __html: formatRichTextPreviewContent(strategyContent.content),
+ }}
+ />
+ </Form.Item>
{/* 保存按钮 */}
{!isReadOnly && (
<div style={{ marginTop: '24px' }}>
diff --git a/miniprogram/pages/strategy/detail.vue b/miniprogram/pages/strategy/detail.vue
index 9c67935..c923ca9 100644
--- a/miniprogram/pages/strategy/detail.vue
+++ b/miniprogram/pages/strategy/detail.vue
@@ -116,9 +116,21 @@
.filter(item => !!item)
}
- // 处理富文本中的图片路径，并统一图片展示样式
+ // 兼容纯文本内容里的换行，避免 rich-text 折叠换行
+ const normalizeRichTextLineBreaks = (html: string) => {
+ const content = String(html || '')
+ if (!content) {
+ return ''
+ }
+ if (/<[^>]+>/.test(content)) {
+ return content
+ }
+ return content.replace(/\r\n|\r|\n/g, '<br />')
+ }
+
+ // 处理富文本中的图片路径，并统一图片展示样式
const formatRichText = (html: string) => {
- return String(html || '')
+ return normalizeRichTextLineBreaks(html)
.replace(/src=(['"])(.*?)\1/gi, (_match, quote, src) => `src=${quote}${formatImageUrl(src)}${quote}`)
.replace(/<img/gi, '<img style="max-width:100%;height:auto;margin:0 auto;display:block"')
}
--
Gitblit v1.7.1