E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

最近有个产品需求:在PC端里用富文本编辑器里编写自定义内容,然后保存后需要在小程序端展示,了解过的朋友就知道了,富文本编辑器输出的内容都是基于HTML标签的,比如:div、p、br这些常用的,而小程序中使用的是类似于HTML的标签,但并不能通用!坑就在这里,两者是不通用的,所以就会遇到解析的问题。本篇就是基于这个问题,从而实现两者的互相兼容,其实呢网上早已有解决方案,但有些不太全面,所以呢,我会把实现的具体步骤写出来,仅供参考!假设我要实现这种效果,如下图:上图中的内容都是富文本编辑器中生成后保存到数据库的,所以代码就会类似于下面这种↓↓↓↓↓↓:1p某某某先生:/p pbr/p p谨代表XXX公司,真诚欢迎您加入 研发部 任 技术总监。/p pbr/p p请您于 2019年 3 月 1日(星期五)上午9:00,携带以下物品,到 某某某地点处办理报到手续。/p pbr/p p1、居民身份证原件及复印件4张;/p pbr/p p2、毕业证书原件及复印件1张(如学生,提供有效期内学生证原件及复印件1张);学历证书原件及复印件1张(如应届毕业生,需额外提供 就业报到证);/p pbr/p p3、相关证书原件及复印件1张(如需要);/p pbr/p p4、二寸白底证件照片2张;/p pbr/p p5、有工作经验的需提交: 离职证明 / 解除劳动合同证明 ;/p pbr/p p6、公立市级医院出具的体检报告单/p pbr/p p注:/p pbr/p p1 ) 如接受我司offer,请邮件回复接受;如对offer有任何疑问,也请尽快回复邮件说明。/p pbr/p p2 ) 如果您确认此录用offer,我司相关人员将对您入职资格(体检、验证等)进行审核。若入职资格的审核(体检、验证等)不符要求,此offer将自动失效。/p pbr/p p3 ) 请按约定时间至我司报到,如超过约定时间半个工作日未至我司报到且无正当理由 ,视为您自动放弃我司就业机会,本offer自动失效。/p pbr/p p附我司作息安排:周一至周五,上午9:00~12:00 下午13:00~18:00  /p pbr/p p以上事宜请知悉,若有疑问,请及时与我联系, 谢谢。/p pbr/p p /p pbr/p 好了,下面开始言归正传,说说如何实现的吧。1. 先下载主要代码,传送门,下载好之后,把wxParse这个文件夹复制到自己小程序的根项目下。123456789- wxParse/  -wxParse.js(必须存在)  -html2json.js(必须存在)  -htmlparser.js(必须存在)  -showdown.js(必须存在)  -wxDiscode.js(必须存在)  -wxParse.wxml(必须存在)  -wxParse.wxss(必须存在)  -emojis(可选)目录结构如下图:2. 在wxml中加入如下代码(PS: 路径请根据自身项目来调整):1import src=”../../wxParse/wxParse.wxml” /123view class=”offer-detail”    template is=”wxParse” data=”{{wxParseData:article.nodes}}”//view3. 在使用的View中引入WxParse模块,js里加入如下代码(PS: 路径请根据自身项目来调整):1var WxParse = require(‘../../wxParse/wxParse.js’);然后在onLoad中加入以下测试代码:12345678onLoad: function(options) {  // test  var that = this;  var htmlTpl = ‘p某某某先生:/p pbr/p p谨代表XXX公司,真诚欢迎您加入 研发部 任 技术总监。/p pbr/p p请您于 2019年 3 月 1日(星期五)上午9:00,携带以下物品,到 某某某地点处办理报到手续。/p pbr/p p1、居民身份证原件及复印件4张;/p pbr/p p2、毕业证书原件及复印件1张(如学生,提供有效期内学生证原件及复印件1张);学历证书原件及复印件1张(如应届毕业生,需额外提供 就业报到证);/p pbr/p p3、相关证书原件及复印件1张(如需要);/p pbr/p p4、二寸白底证件照片2张;/p pbr/p p5、有工作经验的需提交: 离职证明 / 解除劳动合同证明 ;/p pbr/p p6、公立市级医院出具的体检报告单/p pbr/p p注:/p pbr/p p1 ) 如接受我司offer,请邮件回复接受;如对offer有任何疑问,也请尽快回复邮件说明。/p pbr/p p2 ) 如果您确认此录用offer,我司相关人员将对您入职资格(体检、验证等)进行审核。若入职资格的审核(体检、验证等)不符要求,此offer将自动失效。/p pbr/p p3 ) 请按约定时间至我司报到,如超过约定时间半个工作日未至我司报到且无正当理由 ,视为您自动放弃我司就业机会,本offer自动失效。/p pbr/p p附我司作息安排:周一至周五,上午9:00~12:00 下午13:00~18:00  /p pbr/p p以上事宜请知悉,若有疑问,请及时与我联系, 谢谢。/p pbr/p p /p pbr/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/

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序解析并展示富文本编辑器保存后的内容
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏