目录
1）主要属性
2）示例与最佳实践
相关问题：
1）如何保存rich-text富文本组件中的图片？
2）在富文本rich-text中，如何解决图片之间的间距问题？
3）富文本rich-text里面怎么插入ad广告标签?如何将html文本直接解析呈现？
4）rich-text中的图片能点击放大吗?
5）rich-text 解析富文本，图片过大，如何自定义大小？
6）rich-text怎么识别回车符？
7）rich-text不解析iframe标签？
8）rich-text的文本支持selectable吗？
9）如何使用rich-text处理视频的问题？
10）使用rich-text如何处理特殊类型的图片，例如data类型的url？
11）rich-text中如何显示云存储中的图片？
本文9840字，阅读9分钟，实践30分钟
文 / 石桥码农
rich-text是富文本组件。
1）主要属性
2）示例与最佳实践
Wxml:
<rich-text>
js:
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 20px;padding:20px;'
},
children: [{
type: 'text',
text: '中文Hello World!'
},{
name: 'span',
attrs:{
style: 'color: green;'
},
children: [{
type: 'text',
text: 'message'
}]
},{
name:'img',
attrs:{
src:'//p2.ttnews.xyz/5e8375080d8c16be89ded459.jpg',
style:'width:30px'
}
},{
name:'img',
attrs:{
src:'https://www.yishulun.com/images/qrcode.png',
style:'width:100px'
}
}]
}]
使用rich-text组件，关键在于nodes的编写。
nodes是一个数组，数组中每个元素可以是复合的node节点，也可以是末节的text节点。简单分辨节点类型的方法，可以看节点有没有name属性，name代表标签名称，如果有name，代表是复合节点；如果没有，并且有type属性为”text”，代表是简单的文本节点。
当是text节点时，例如这个：
{
type: 'text',
text: 'message'
}
它代表的是最基本的文本，没有样式，它所有的样式都来自父节点的设定。在vue或wxml的模板中，类似于：
{{message}}
这样的一个纯文本节点，解析到虚拟DOM列表中，都是一个独立的节点。在nodes列表里的type为“text”的节点，与它们类似的，也是一个纯文本节点。
当是非text节点，必有一个name属性，例如：
{
name:'img',
attrs:{
src:'//p2.ttnews.xyz/5e8375080d8c16be89ded459.jpg',
style:'width:30px'
}
}
这相当于是一个img标签，翻译为html代码相当于：
从mdn文档上可以查到img标签还有其它属性，例如width、height、alt、ismap、longdesc、usemap等。这些html定义的属性原则上都可以在nodes里定义，但是在使用前，最好先查一下微信小程序rich-text组件的文档：
developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
这里有一个受信任的HTML节点及属性列表，看看拟用的属性在不在受支持的范围。如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
下面看看相关问题：略
好了，我是石桥码农，今天的分享就到这里。有什么问题欢迎留言，也欢迎群内讨论。
2020年03月28日
閱讀更多 石橋碼農 的文章
