微信小程序富文本标签rich-text

前言： 做项目过程中，经常遇到需要在小程序中展示用富文本编辑器生成的内容。包含着各种HTML标签和样式。这就需要用到rich-text组件。

具体用法：

1、index.wxml文件：

// nodes属性接收富文本内容，可以是字符串；
// 也可是数组，类似vue渲染函数，节点数组。
//富文本编辑器生成的一般是字符串，所以我们演示接收字符串。
<rich-text nodes="{{ content }}"></rich-text>

2、index.js文件：

  data: {
    content: '<p style="text-align: center;"><img src="https://defaultbucket-1308233582.cos.ap-shanghai.myqcloud.com/2eb467d1a9d34a5fa3922fc56a59ae16.jpeg"/></p><p><span style="font-family: 宋体;">我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本</span></span></p><p><span style="font-family: 宋体;">我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本我是一段文本</span></span></p>',
 },

3、显示效果

这里图片没有样式的，导致图片会按照原始大小显示，超出界面，文本段落也没有缩进。我们需要在js文件中使用正则来进行处理。

2、index.js文件：

onLoad: function () {
  const content = this.data.content.replace(/(\<img|\<p)/gi, function ($0, $1) {
    return {
      "<img": '<img style="width:100%;height:auto;display:block;" ',
      "<p": '<p style="text-indent: 24px;" ',
      "<article":"<div",
      "</article": "</div",
      "<header": "<div",
      "</header": "</div"
    }[$1];
  });
  this.setData({
    content
  });
},

3、显示效果

图片宽度设置到100%；文章段首增加缩进。还可以在正则里面增加更多样式设置。让效果更漂亮