小程序富文本rich-text数据转化插件

最近在写Taro
由于后台有富文本，又想到了wxParse

但是由于 Taro用的react 语法，还是和原生小程序有一点区别
于是想到了直接用小程序支持富文本的标签 rich-text
改写的插件地址

图片.png

但是 rich-text只接收 js节点形式的数据
我们只能手动把 富文本 DOM转成 JS 虚拟的DOM

于是改编了wxParse 的 htmlParse和html2json
html2json改名成 richText.js

现在支持一般的富文本只需要两个文件了
htmlParse.js
richText.js

用法

1.引入 richText.js

import richText from "../../richText/richText";

2.富文本转化为node节点

let richTextData = '<p><br></p><p>一个<span style="font-weight: bold;">富文本</span>，带<span style="background-color: rgb(249, 150, 59);">图片</span>的<img src="https://timgsa.baidu.com/timg?image&amp;quality=80&amp;size=b9999_10000&amp;sec=1548484591468&amp;di=bfa71248d743922870cb2bd81ac53eee&amp;imgtype=0&amp;src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F18d8bc3eb13533fa65021ddba5d3fd1f40345b8b.jpg" style="max-width:100%;"></p><p>带</p><p><span style="color: rgb(194, 79, 74);">换行</span><br></p>';
let nodes = richText.html2json(richTextData).child
    this.setData({
      richData:nodes
    })

3.页面rich-text标签绑定

<rich-text nodes="{{richData}}"></rich-text>

结果

微信截图_20190126141604.png