feat(mp): 文章详情页改用 mp-html 原生富文本组件
- 引入 mp-html 替代 RichText,支持图文混排、表格等复杂内容 - 新建 RichArticle 组件封装 sanitizeHtml + mp-html - 通过 native-components 拷贝原生组件到 dist - 优化文章排版样式(字号、间距、分隔线、底栏安全区) - sanitize-html 扩展允许 style/data-w-e-type 属性
This commit is contained in:
32
apps/miniprogram/src/components/RichArticle/index.tsx
Normal file
32
apps/miniprogram/src/components/RichArticle/index.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import { memo, useMemo } from 'react';
|
||||
import { View } from '@tarojs/components';
|
||||
import { sanitizeHtml } from '@/utils/sanitize-html';
|
||||
|
||||
interface RichArticleProps {
|
||||
html: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function prepareHtml(raw: string): string {
|
||||
return sanitizeHtml(raw);
|
||||
}
|
||||
|
||||
function RichArticle({ html, className }: RichArticleProps) {
|
||||
const content = useMemo(() => prepareHtml(html), [html]);
|
||||
|
||||
if (!content) return null;
|
||||
|
||||
return (
|
||||
<View className={className}>
|
||||
<mp-html
|
||||
content={content}
|
||||
lazy-load
|
||||
selectable
|
||||
container-style="font-size:16px;color:#5A554F;line-height:1.8;word-break:break-word"
|
||||
tag-style='{"img":"max-width:100%;border-radius:8px;margin:12px auto;display:block","a":"color:#C4623A;text-decoration:none"}'
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default memo(RichArticle);
|
||||
Reference in New Issue
Block a user