微信小程序解析并展示富文本编辑器保存后的内容

最近有个产品需求：在PC端里用富文本编辑器里编写自定义内容，然后保存后需要在小程序端展示，了解过的朋友就知道了，富文本编辑器输出的内容都是基于HTML标签的，比如：div、p、br这些常用的，而小程序中使用的是类似于HTML的标签，但并不能通用！坑就在这里，两者是不通用的，所以就会遇到解析的问题。

本篇就是基于这个问题，从而实现两者的互相兼容，其实呢网上早已有解决方案，但有些不太全面，所以呢，我会把实现的具体步骤写出来，仅供参考！

假设我要实现这种效果，如下图：

上图中的内容都是富文本编辑器中生成后保存到数据库的，所以代码就会类似于下面这种↓↓↓↓↓↓：

1

某某某先生: 谨代表XXX公司，真诚欢迎您加入 研发部 任 技术总监。 请您于 2019年 3 月 1日（星期五）上午9：00，携带以下物品，到 某某某地点处办理报到手续。 1、居民身份证原件及复印件4张； 2、毕业证书原件及复印件1张(如学生，提供有效期内学生证原件及复印件1张)；学历证书原件及复印件1张（如应届毕业生，需额外提供 就业报到证）； 3、相关证书原件及复印件1张（如需要）； 4、二寸白底证件照片2张； 5、有工作经验的需提交： 离职证明 / 解除劳动合同证明 ； 6、公立市级医院出具的体检报告单 注： 1 ) 如接受我司offer，请邮件回复接受；如对offer有任何疑问，也请尽快回复邮件说明。 2 ) 如果您确认此录用offer，我司相关人员将对您入职资格（体检、验证等）进行审核。若入职资格的审核（体检、验证等）不符要求，此offer将自动失效。 3 ) 请按约定时间至我司报到，如超过约定时间半个工作日未至我司报到且无正当理由 ，视为您自动放弃我司就业机会，本offer自动失效。 附我司作息安排：周一至周五，上午9:00~12:00 下午13:00~18:00   以上事宜请知悉，若有疑问，请及时与我联系， 谢谢。

好了，下面开始言归正传，说说如何实现的吧。

1. 先下载主要代码，传送门，下载好之后，把wxParse这个文件夹复制到自己小程序的根项目下。

1 2 3 4 5 6 7 8 9

- wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxParse.wxss(必须存在) -emojis(可选)

目录结构如下图：

2. 在wxml中加入如下代码（PS: 路径请根据自身项目来调整）：

1

1 2 3