评论

小程序富文本插件2.0

小程序富文本插件能力重大升级,支持website、markdown等模式

前言

前段时间发布的小程序富文本插件获得了许多人的关注与支持,经过一段时间的反馈与改进,现在功能已经相对比较完善啦,之前下载的朋友可以更新一下(GitHub链接),另外,由于前端对于时间和空间的要求,一些功能比较精简,因此本次推出了后端node.js加强包,可以实现更加强大的功能

功能介绍

  1. 支持多种解析模式

    • html模式:输入一个html字符串,与前端类似
    • website模式:输入一个网址,自动获取内容并进行解析(支持静态和动态网页)
    • markdown模式:输入markdown字符串
    • file模式:输入文件路径,自动打开并解析(仅支持html和md文件)
  2. 支持更加丰富的style标签匹配模式

    模式 匹配的标签 说明
    .demo <element class=“demo”> 按class匹配
    #demo <element id=“demo”> 按id匹配
    body <body> 按标签名匹配
    * 所有 通配符
    .demo1,.demo2 <element class=“demo1”>或<element class=“demo2”> 多个并列
    .demo1.demo2 <element class=“demo1 demo2”> 一层多个
    .demo1 .demo2 <element class=“demo1”>  …  <element class=“demo2”> 后代选择器
    .demo1>.demo2 <element class=“demo1”><element class=“demo2”> 子选择器
  3. 与前端组件Parser组件相比,增加支持以下标签

    标签名 属性
    iframe src, width, height, marginheight, marginwidth, scrolling
    frame src, width, height, marginheight, marginwidth, scrolling
    source src
    embed src
    object data
    param name, value
  4. 支持解析各类实体
    支持编码各类html实体(包括中文),前端是通过rich-text组件显示,当基础库低于2.2.5时部分实体编码将无法显示。

  5. 支持代码高亮
    自动识别语言,支持选择80余种风格(可参考highlightjs官网

使用方法

npm install parser-wxapp
const parser=require('parser-wxapp');
var html="<div>Hello World!</div>";
parser(html).then(function(res){
  console.log(res);
})
  • 参数

    参数 类型 必填 默认值 说明
    html String 需要解析的html字符串
    mode String html 解析模式,支持的有html, website, markdown(md)
    options Object 解析设置,其中styles为代码高亮风格,tagStyle为自定义的标签样式,如{body: “margin:5px;”},engie是打开网址的引擎,domain是主域名
  • 返回值
    一个形如{title: "String", "nodes":[Array], "imgList": [Array]}的结构体,其中title为页面标题(title标签中的值),nodes为节点数组(可以作为rich-text组件的nodes参数),imgList是所有图片地址的数组,整个结构体可以作为前端Parser组件的值

立即体验


点击自定义测试,解析模式选择后端解析即可体验后端node.js支持包的功能,通过部署在云函数上的代码实现。

前端组件的新功能

  1. 支持自动将title标签中的设置到页面标题上
  2. 支持在Parser标签内部加入加载提示或动画,将在未加载完成或内容为空时显示,加载完成后自动隐藏

链接

详细文档可见:
前端Parser组件
后端插件npm地址

最后一次编辑于  2019-05-13  
点赞 7
收藏
评论

6 个评论

  • 布鲁斯没有韦恩
    布鲁斯没有韦恩
    2019-05-07

    顺带开个车


    我做了一个半成品

    微信官方的富文本编辑器预览:



    2019-05-07
    赞同 1
    回复 7
    查看更多(2)
  • 君子不器
    君子不器
    2019-05-14

    <p style="\"text-align:" center;\"="">https://mmbiz.qpic.cn/mmbiz_jpg/7ehw2mXw8FW2M9LNko49Kibtkmf2TOCV247JkB2etFXfHcGhW27uTLxpmTR5jCbxdOKj931X0LuI7suqdSfO0Cg/640?wx_fmt=jpeg\" data-type=\"jpeg\" data-w=\"600\" style=\"width: 373px;height: 302px;\" data-backw=\"556\" data-backh=\"450\" data-before-oversubscription-url=\"https://mmbiz.qpic.cn/mmbiz_jpg/7ehw2mXw8FW2M9LNko49Kibtkmf2TOCV247JkB2etFXfHcGhW27uTLxpmTR5jCbxdOKj931X0LuI7suqdSfO0Cg/640?wx_fmt=jpeg\"  />

    然而,用户1次触发7天内推送1条通知是明显不够用的。比如,签到功能利用模板消息的推送来提醒用户每天签到,只能在用户前一天签到的情况下,获取一次推送模板消息的机会,然后用于第二天向该用户发送签到提醒。但是很多情况下,用户在某一天忘记签到,系统便失去了提醒用户的权限,导致和用户断开了联系;再比如,系统想主动告知用户即将做某活动,然而由于微信小程序被动触发通知的限制,系统将无法主动推送消息。

    <iframe class="\"video_iframe" rich_pages\"="" data-vidtype="\"2\"" data-mpvid="\"wxv_805198819334946816\"" data-cover="\"http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2F7ehw2mXw8FWOIgGK3yicRA4YzUg683AY2pb8iazDic4qBlSvmE2TxT10b8A48O9y5yyat0PuINtib3NSWaGQfbnCIg%2F0%3Fwx_fmt%3Djpeg\"" allowfullscreen="\"\"" frameborder="\"0\"" data-ratio="\"1.7777777777777777\"" data-w="\"1280\"" data-src="\"

    <p style="\"text-align:" center;\"="">https://mmbiz.qpic.cn/mmbiz_jpg/7ehw2mXw8FWJc5dqyr6dJicZ9cNQ6OnjvxzWwzxaYtOBPWOeNhjGpicG5WUle8zVicsQ1WaL50kXORAqGpkHaXD6g/640?wx_fmt=jpeg\" data-type=\"jpeg\" data-w=\"430\" style=\"width: 184px;height: 184px;\"  />


    2019-05-14
    赞同
    回复
  • 君子不器
    君子不器
    2019-05-14

    图片和视频不能显示

    2019-05-14
    赞同
    回复 6
    • 金煜峰
      金煜峰
      2019-05-14

      可以提供一下出现问题的html字符串吗?

      2019-05-14
      回复
    • 君子不器
      君子不器
      2019-05-14回复金煜峰

      <p style="\"text-align:" center;\"="">https://mmbiz.qpic.cn/mmbiz_jpg/7ehw2mXw8FW2M9LNko49Kibtkmf2TOCV247JkB2etFXfHcGhW27uTLxpmTR5jCbxdOKj931X0LuI7suqdSfO0Cg/640?wx_fmt=jpeg\" data-type=\"jpeg\" data-w=\"600\" style=\"width: 373px;height: 302px;\" data-backw=\"556\" data-backh=\"450\" data-before-oversubscription-url=\"https://mmbiz.qpic.cn/mmbiz_jpg/7ehw2mXw8FW2M9LNko49Kibtkmf2TOCV247JkB2etFXfHcGhW27uTLxpmTR5jCbxdOKj931X0LuI7suqdSfO0Cg/640?wx_fmt=jpeg\"  />

      然而,用户1次触发7天内推送1条通知是明显不够用的。比如,签到功能利用模板消息的推送来提醒用户每天签到,只能在用户前一天签到的情况下,获取一次推送模板消息的机会,然后用于第二天向该用户发送签到提醒。但是很多情况下,用户在某一天忘记签到,系统便失去了提醒用户的权限,导致和用户断开了联系;再比如,系统想主动告知用户即将做某活动,然而由于微信小程序被动触发通知的限制,系统将无法主动推送消息。

      <iframe class="\"video_iframe" rich_pages\"="" data-vidtype="\"2\"" data-mpvid="\"wxv_805198819334946816\"" data-cover="\"http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2F7ehw2mXw8FWOIgGK3yicRA4YzUg683AY2pb8iazDic4qBlSvmE2TxT10b8A48O9y5yyat0PuINtib3NSWaGQfbnCIg%2F0%3Fwx_fmt%3Djpeg\"" allowfullscreen="\"\"" frameborder="\"0\"" data-ratio="\"1.7777777777777777\"" data-w="\"1280\"" data-src="\"

      <p style="\"text-align:" center;\"="">https://mmbiz.qpic.cn/mmbiz_jpg/7ehw2mXw8FWJc5dqyr6dJicZ9cNQ6OnjvxzWwzxaYtOBPWOeNhjGpicG5WUle8zVicsQ1WaL50kXORAqGpkHaXD6g/640?wx_fmt=jpeg\" data-type=\"jpeg\" data-w=\"430\" style=\"width: 184px;height: 184px;\"  />


      2019-05-14
      回复
    • 君子不器
      君子不器
      2019-05-14回复君子不器

      我把公众号的文章拉过来,不能解析图片和视频

      2019-05-14
      回复
    • 君子不器
      君子不器
      2019-05-14回复金煜峰

      <p style="\"text-align:" center;\"="">https://mmbiz.qpic.cn/mmbiz_jpg/7ehw2mXw8FW2M9LNko49Kibtkmf2TOCV247JkB2etFXfHcGhW27uTLxpmTR5jCbxdOKj931X0LuI7suqdSfO0Cg/640?wx_fmt=jpeg\" data-type=\"jpeg\" data-w=\"600\" style=\"width: 373px;height: 302px;\" data-backw=\"556\" data-backh=\"450\" data-before-oversubscription-url=\"https://mmbiz.qpic.cn/mmbiz_jpg/7ehw2mXw8FW2M9LNko49Kibtkmf2TOCV247JkB2etFXfHcGhW27uTLxpmTR5jCbxdOKj931X0LuI7suqdSfO0Cg/640?wx_fmt=jpeg\"  />

      然而,用户1次触发7天内推送1条通知是明显不够用的。比如,签到功能利用模板消息的推送来提醒用户每天签到,只能在用户前一天签到的情况下,获取一次推送模板消息的机会,然后用于第二天向该用户发送签到提醒。但是很多情况下,用户在某一天忘记签到,系统便失去了提醒用户的权限,导致和用户断开了联系;再比如,系统想主动告知用户即将做某活动,然而由于微信小程序被动触发通知的限制,系统将无法主动推送消息。

      <iframe class="\"video_iframe" rich_pages\"="" data-vidtype="\"2\"" data-mpvid="\"wxv_805198819334946816\"" data-cover="\"http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2F7ehw2mXw8FWOIgGK3yicRA4YzUg683AY2pb8iazDic4qBlSvmE2TxT10b8A48O9y5yyat0PuINtib3NSWaGQfbnCIg%2F0%3Fwx_fmt%3Djpeg\"" allowfullscreen="\"\"" frameborder="\"0\"" data-ratio="\"1.7777777777777777\"" data-w="\"1280\"" data-src="\"

      <p style="\"text-align:" center;\"="">https://mmbiz.qpic.cn/mmbiz_jpg/7ehw2mXw8FWJc5dqyr6dJicZ9cNQ6OnjvxzWwzxaYtOBPWOeNhjGpicG5WUle8zVicsQ1WaL50kXORAqGpkHaXD6g/640?wx_fmt=jpeg\" data-type=\"jpeg\" data-w=\"430\" style=\"width: 184px;height: 184px;\"  />


      2019-05-14
      回复
    • 金煜峰
      金煜峰
      2019-05-14回复君子不器

      公众号网页的视频用的不是video组件而是iframe,这个需要在后端使用无头浏览器加载才可能可以播放;图片的话好像只有是data-src属性,没有src属性(网页里是在js里动态设置的,在解析时js会被忽略)因此是无法直接显示的(在后端解析可以自动把data-src赋给src应该可以显示图片,如果要在前端显示可以把DomHandle.js中158-161行的注释打开)这个字符串有点乱码,应该是这样😂不是的话可以把网址给我再看看,一般不推荐直接把推送页面的html复制来解析,有条件的最好用富文本编辑器中编辑的富文本


      2019-05-14
      1
      回复
    查看更多(1)
  • 王珂
    王珂
    2019-05-11

    很好的东西。

    2019-05-11
    赞同
    回复
  • 这个人
    这个人
    2019-05-09

    给力

    2019-05-09
    赞同
    回复
  • 大豆博文
    大豆博文
    2019-05-08

    给个赞

    2019-05-08
    赞同
    回复
登录 后发表内容