手册版本 V5.0
此组件已废弃，仅为老用户保留，新版本组件请移步手册左侧 内容渲染 组件。
组件介绍
gui-article-info [ 文章内容解析组件 ] 功能包括 :
1、解析 GraceUI 编辑器产生的内容;
2、经过转换( 我们提供 php 版本的转换代码 ) 可以适配 百度 UEditor 生成的 html 内容;
3、提供图片预览功能、样式更好看;
组件名称
gui-article-info : /graceUI/组件目录/gui-article-info
兼容平台
| H5 | APP | 小程序 | NVUE |
| ✔ | ✔ | ✔ | ✔ |
组件属性
| 属性名称 | 类型 | 默认值 | 作用 |
| article | Array | [] | 文章详情数据，数组格式 |
| itemMargin | String | 20rpx | 项目直接的间距 |
| padding | Number | 30 | 文章详情整体左右间距 |
| textStyle | String | line-height:50rpx; font-size:28rpx; color:#2B2E3D; | 文本样式 |
| centerStyle | String | line-height:50rpx; font-size:28rpx; color:#2B2E3D; | 居中样式 |
| imgRadius | String | 6rpx | 图片圆角 |
| quoteStyle | String | line-height:44rpx; font-size:28rpx; color:#2B2E3D; padding:20rpx; background-color:#F8F8F8; | 引用样式 |
| strongStyle | String | line-height:50rpx; font-size:28rpx; color:#2B2E3D; | 加粗样式 |
| splineStyle | String | line-height:50rpx; font-size:30rpx; color:rgba(69, 90, 100, 0.6); | 分割线样式 |
为什么使用此组件
1、富文本 : 不支持格式较多、不够稳定、不支持图片点击事件;
2、webview : 交互困难，页面无法使用其他组件;
3、效率较低、效果不好!
项目数据结构
[{"type":"txt","content":""},......]
支持的类型
txt - 普通文本
center - 居中
img - 图片
quote - 引用
pre - 代码块
strong - 加粗
link - 链接
spline - 分隔线 [ 编辑器对应 hr 标签 ]
h1 ~ h6 2021.07.12 新增
video 2021.10.08 新增
转换思路
我们提供了 php 版本的 基于“百度 UEditor“ 生成内容的转换代码，请在GraceUI 付费用户群内下载 ~
演示代码
UNI 普通版本
NVUE 版本
登录并购买 GraceUI 后可以查阅完整手册内容 。