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

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

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

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

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

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

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

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

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

目录结构如下图：

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

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

1	<import src="../../wxParse/wxParse.wxml" />

1
2
3

<view class="offer-detail">
    <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

3. 在使用的View中引入WxParse模块，js里加入如下代码（PS: 路径请根据自身项目来调整）：

1	var WxParse = require('../../wxParse/wxParse.js');

然后在onLoad中加入以下测试代码：

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

这段内容一般是异步请求中获取的，这里只是演示而已~

友情提示：

wxParse.wxss links不是必须的，也可以自行写样式，如需使用，可自行在app.wxss中import。

ok，以上即实现了上图的效果，有兴趣的话可以看看wxParse FVDI J2534, GM Tech2, iProg的源代码，也支持图片或者表情等。很强大，在此感谢开发该开源项目的作者。

写在最后

好了，本文到此结束！

如果还有什么疑问或者建议，欢迎多多交流，如果觉得文章对你有帮助，打个赏，让我有更大的动力去创作，谢谢！

本文参考：https://www.chinaobd2.com/

秒客网

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

相关文章