hookehuyr

docs(rich-text): 添加测试页面说明文档

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
# 富文本渲染测试页面
## 📋 概述
本目录包含两个富文本渲染测试页面,用于验证和对比 Taro 中不同富文本渲染方案的效果。
## 📁 文件说明
| 文件 | 渲染方案 | 说明 |
|------|----------|------|
| `index.vue` | `v-html` 指令 | Taro 内置方案,基于 `rich-text` 组件 |
| `index1.vue` | `mp-html` 组件 | 第三方富文本组件 |
## 🎯 测试功能
### HTML 实体解析
- `&nbsp;` → 空格
- `&amp;``&`
- `&lt;``<`
- `&gt;``>`
- `&quot;``"`
### 标签渲染
- ✅ 基础标签:`<h1>` ~ `<h3>`, `<p>`, `<ul>`, `<li>`, `<strong>`, `<em>`
-`<a>` 标签:v-html 不支持,需要替换为 `<div data-href="">`
-`<img>` 标签:支持,但 URL 可能被损坏
### 图片功能
- 长按预览(使用 `@tarojs/extend``$` 选择器绑定)
### 文件链接功能
- PDF 文件链接渲染为卡片样式
- 点击打开 PDF(使用 `useFileOperation.viewFile`
## 🔍 对比结果
| 特性 | v-html (index.vue) | mp-html (index1.vue) |
|------|-------------------|----------------------|
| `<a>` 标签 | ❌ 不支持,需手动替换 | ✅ 原生支持 |
| `imgtap` 事件 | ❌ 需手动绑定 | ✅ 内置支持 |
| `linktap` 事件 | ❌ 需手动绑定 | ✅ 内置支持 |
| HTML 实体 | ✅ 需手动解析 | ✅ 自动解析 |
| URL 完整性 | ⚠️ 可能损坏 | ✅ 完整保留 |
| 组件大小 | 小(内置) | 大(第三方) |
## 🚀 使用方式
### 访问页面
```bash
# 启动开发服务器
pnpm dev:weapp
# 在微信开发者工具中访问
# 页面路径:pages/rich-text-test/index
# 或:pages/rich-text-test/index1
```
### 测试按钮说明
**index.vue (v-html)**
- 测试1: 纯文本 - 基础 HTML 渲染
- 测试2: HTML标签 - 标题、列表、样式
- 测试3: 图片 - 图片渲染 + 长按预览
- 测试4: 链接 - 普通链接 + PDF 链接
- 清空内容 - 清空测试区域
- 模拟API加载 - 模拟异步数据加载
- 📄 真实API - 加载原始 `<a>` 标签数据
- 📄 真实API(a→div) - 加载 `<a>` 替换为 `<div>` 的数据
**index1.vue (mp-html)**
- 测试1: 图片 - 图片点击预览
- 测试2: 链接 - 链接点击处理
- 测试3: PDF - PDF 链接点击
## 💡 结论
**推荐使用 mp-html 组件** (`index1.vue`) 用于生产环境,原因:
1. 完整支持 `<a>` 标签
2. URL 不会被损坏
3. 内置事件处理(`imgtap`, `linktap`
4. 更好的样式兼容性
**v-html 方案** (`index.vue`) 仅适用于简单场景,复杂富文本建议使用 mp-html。
## 🔗 相关依赖
```json
{
"mp-html": "^2.5.0",
"@tarojs/extend": "latest"
}
```
## 📝 注意事项
1. **Taro v-html 限制**
- 不支持 `<a>` 标签,需手动替换为 `<div data-href="">`
- URL 可能被损坏(某些字符被替换)
- `data-*` 属性可能被过滤
2. **文件链接处理**
- 使用 `useFileOperation.viewFile()` 统一处理文件打开
- PDF 文件会先下载到本地再预览
3. **图片事件绑定**
- 使用 `@tarojs/extend``$` 选择器
-`nextTick` 中绑定确保 DOM 已渲染