Recently, a product needs: Writing custom content with rich text editor on the PC side, and then save the program needs to end in a small show, to find out about friends will know the contents of the rich text editor output are based on HTML label, such as: div, p, brthese common, but little used in the program are similar to HTML tags, but not universal! Hang on here, the two are not generic, it will encounter problems resolved.
Benpian is based on this issue, in order to achieve both compatible with each other, in fact, it already has online solutions, but some are not comprehensive, so, I will achieve concrete steps to write out, for reference purposes only!
Suppose I want to achieve this effect, as shown below:
After generating the above figure contents are saved rich text editor to the database, so that the code will be similar to the following ↓↓↓↓↓↓:
1 |
On behalf of </ p> <p> <br> </ p> <p> XXX company would like to sincerely welcome you to join & nbsp; R & D & nbsp; technical director: <p> a Mr. so and so. </ P> <p> <br> </ p> <p> Please 2019 3 Yue 1 Ri (Xing Qiwu) at 9:00 in the morning, bring the following items to apply for a place at such and such registration formalities. </ P> <p> <br> </ p> <p> 1, resident ID card 4; </ p> <p> <br> </ p> <p> 2, diploma original and copy of one (such as students, to provide valid student card within an original and copy); diploma and a copy of an original (such as graduates, to provide additional employment report card); </ p> < p> <br> </ p> <p> 3, a copy of the relevant certificate and an (if necessary); </ p> <p> <br> </ p> <p> 4, two inches white ID photo 2; </ p> <p> <br> </ p> <p> 5, with work experience required to submit: & nbsp; leaving certificate / labor contract proof & nbsp ;; </ p> <p> <br> </ p> <p> 6, the municipal public hospital issued a medical report </ p> <p> <br> </ p> <p> Note: </ p> <p> <br> </ p> <p> 1) as to accept our offer, please e-mail reply to accept; If you have any questions about the offer, please reply to messages explain as soon as possible. </ P> < p> <br> </ p> <p> 2) If you confirm the hiring offer, our personnel will be your entry qualification (physical examination, verification, etc.) for review. If the entry does not match the required qualifications of the audit (examination, verification, etc.), this offer will automatically lapse. </ P> <p> <br> </ p> <p> 3) Please check in at the appointed time to Division I, as more than half a day before the arrival of the appointed time our report and without justification, you are deemed automatically give up employment opportunities for our company, this offer expire automatically. </ P> <p> <br> </ p> <p> attached our daily routine schedule: Monday to Friday, 9: 00-12: 00 pm 13: 00 ~ 18: 00 & nbsp; & nbsp; </ p > <p> <br> </ p> <p> Please be advised that the above matters, if in doubt, please contact me, thank you. </ P> <p> <br> </ p> <p> </ p> <p> <br> </ p> p> <br> </ p> <p> Please be advised that the above matters, if in doubt, please contact me, thank you. </ P> <p> <br> </ p> <p> </ p> <p> <br> </ p> p> <br> </ p> <p> Please be advised that the above matters, if in doubt, please contact me, thank you. </ P> <p> <br> </ p> <p> </ p> <p> <br> </ p> |
Well, let's start Closer to home, talk about how to achieve it.
1. After the first download the main code, the portal, download the good, to wxParsecopy this folder to the root project their own applets.
1 2 3 4 5 6 7 8 9 |
- wxParse / -wxParse.js (must exist) -html2json.js (must be present) -htmlparser.js (must be present) -showdown.js (must be present) -wxDiscode.js (must be present) -wxParse.wxml (must be present ) -wxParse.wxss (must be present) -emojis (optional) |
The directory structure shown below:
2. wxmladd the following code (PS: Please path is adjusted according to their item):
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公司，真诚欢迎您加入 研发部 任 技术总监。</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、有工作经验的需提交： 离职证明 / 解除劳动合同证明 ；</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 </p ><p><br></p ><p>以上事宜请知悉，若有疑问，请及时与我联系， 谢谢。</p ><p><br></p ><p> </p ><p><br></p >';
WxParse.wxParse('article', 'html', htmlTpl, that, 5);
} |
This content is generally acquired asynchronous request, here is the presentation of it ~
friendly reminder:
wxParse.wxss linksIs not necessary, you can also write their own style, for the use, self in app.wxssthe import.
ok, that is, to achieve the above effect on the map, are interested can look at wxParse FVDI J2534 , GM Tech2 , IPROG source code, and also supports pictures or facial expressions and so on. Very strong, I like to thank the authors of the open source development project.
Written in the last
Well, this article is over!
If you have any questions or suggestions, welcome more exchanges, if that article help you, make a reward, so I have a greater incentive to create, thank you!
Reference article: https://www.chinaobd2.com/