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

时间:2021-04-29 16:45:39

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

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

假设我要实现这种效果,如下图:

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

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

1
<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这个文件夹复制到自己小程序的根项目下。

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
<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中加入以下测试代码:

1
2
3
4
5
6
7
8
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.wxssimport

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

写在最后

好了,本文到此结束!

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

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