完成AI问答模块
This commit is contained in:
91
docs/RichText使用指南.md
Normal file
91
docs/RichText使用指南.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# Taro RichText 富文本组件使用指南
|
||||
|
||||
## 基本用法
|
||||
|
||||
```tsx
|
||||
import { RichText } from '@tarojs/components';
|
||||
|
||||
// 显示HTML字符串
|
||||
<RichText
|
||||
nodes={htmlString}
|
||||
space="nbsp"
|
||||
/>
|
||||
```
|
||||
|
||||
## 主要属性
|
||||
|
||||
### nodes
|
||||
- **类型**: `string | Array<Node>`
|
||||
- **说明**: 富文本内容,支持HTML字符串或节点数组
|
||||
|
||||
### space
|
||||
- **类型**: `'ensp' | 'emsp' | 'nbsp'`
|
||||
- **说明**: 显示连续空格的方式
|
||||
- `ensp`: 中文字符空格一半大小
|
||||
- `emsp`: 中文字符空格大小
|
||||
- `nbsp`: 根据字体设置的空格大小
|
||||
|
||||
### selectable
|
||||
- **类型**: `boolean`
|
||||
- **默认值**: `false`
|
||||
- **说明**: 富文本是否可以长按选中
|
||||
|
||||
## HTML内容处理
|
||||
|
||||
### 支持的HTML标签
|
||||
- 文本标签: `p`, `span`, `div`, `h1-h6`, `strong`, `b`, `em`, `i`
|
||||
- 列表标签: `ul`, `ol`, `li`
|
||||
- 其他标签: `img`, `a`, `br`, `hr`
|
||||
|
||||
### 样式处理
|
||||
富文本内容的样式通过CSS全局样式定义:
|
||||
|
||||
```scss
|
||||
.content {
|
||||
:global {
|
||||
p { margin: 16px 0; }
|
||||
img { max-width: 100%; }
|
||||
// 更多样式...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 实际应用示例
|
||||
|
||||
### 文章详情页面
|
||||
```tsx
|
||||
<View className={'content text-gray-700 text-sm'}>
|
||||
<RichText
|
||||
nodes={item?.content || ''}
|
||||
space="nbsp"
|
||||
/>
|
||||
</View>
|
||||
```
|
||||
|
||||
### 协议页面
|
||||
```tsx
|
||||
<View className={'content text-gray-700 text-sm p-4'}>
|
||||
<RichText nodes={content}/>
|
||||
</View>
|
||||
```
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **安全性**: RichText会直接渲染HTML,注意防范XSS攻击
|
||||
2. **性能**: 大量富文本内容可能影响性能
|
||||
3. **兼容性**: 不同平台对HTML标签支持程度不同
|
||||
4. **样式**: 使用`:global`确保样式能正确应用到富文本内容
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 图片不显示
|
||||
- 检查图片URL是否正确
|
||||
- 确保图片域名在小程序白名单中
|
||||
|
||||
### 样式不生效
|
||||
- 使用`:global`包裹富文本样式
|
||||
- 检查CSS选择器优先级
|
||||
|
||||
### 内容被截断
|
||||
- 检查容器高度设置
|
||||
- 使用`max-width: 100%`防止内容溢出
|
||||
Reference in New Issue
Block a user