Thanks to visit codestin.com
Credit goes to github.com

Skip to content
/ Parser Public
forked from jin-yufeng/mp-html

小程序富文本插件,支持丰富的标签,无层数限制,容错性强且轻量化,支持在各类框架中使用

License

Notifications You must be signed in to change notification settings

branll/Parser

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Parser

小程序富文本插件(本文档动态更新,建议加星收藏)

新版文档链接:Parser插件文档

功能简介

  • 支持解析 style 标签中的全局样式
    支持解析和匹配 style 标签中的样式

    <parser html="{{html}}" />
    data:{
      html:'<style>.a{font-style:italic}#b{font-weight:bold}p{text-align:center}</style>'
    	  +'<p><span class="a">Hello </span><span id="b">World!</span></p>'
    }
  • 支持自定义默认的标签样式
    支持给各个标签设置默认的效果
    示例(给表格设置默认的边框):

    <parser html="{{html}}" tag-style="{{tagStyle}}" />
    data:{
      tagStyle:{
        table: 'border-collapse:collapse;border-top:1px solid gray;border-left:1px solid gray;',
        th: 'border-right:1px solid gray;border-bottom:1px solid gray;',
        td: 'border-right:1px solid gray;border-bottom:1px solid gray;'
      }
    }
  • 支持多资源加载
    支持在 videoaudio 标签中设置多个 source 标签,本插件将按顺序进行加载,若前面的链接无法播放,将自动切换下一个链接进行加载和播放,直到最后一个链接;可用于解决平台差异,最大程度避免无法播放

    <video controls>
      <source src="demo1.mov" />
      <source src="demo2.webm" />
    </video>

更多功能可见:功能介绍

使用方法

插件包说明

名称 大小 使用
Parser 45.2KB 微信小程序插件包
Parser.min 31.5KB 微信小程序插件包压缩版(功能相同)
Parser.uni 58.9KB uni-app 插件包(可以编译到所有平台)

在原生框架中使用

  1. 下载 Parser 文件夹至小程序目录
  2. 在需要引用的页面的 json 文件中添加(百度小程序中组件名一定要小写
    {
      "usingComponents": {
        "parser":"/Parser/index"
      }
    }
  3. 在需要引用的页面的 wxml 文件中添加
    <parser html="{{html}}" />
  4. 在需要引用的页面的js文件中添加
    data: {
      html:"<div>Hello World!</div>"
    }
  • demo/wx 文件夹下的是微信小程序 富文本插件 示例程序的源码,可供参考

在uni-app中使用

  • 使用 uni-app 包(可以编译到所有小程序平台)
    1. 下载 Parser.uni 包到 components 目录下(更名为 Parser
    2. 在需要使用页面的 vue 文件中添加
      <template>
        <view>
          <parser :html="html"></parser>
        </view>
      </template>
      <script>
      import parser from "@/components/Parser/index"
      export default{
        components: {
          parser
        },
        data() {
          return {
            html: '<div>Hello World!</div>'
          }
        }
      </script>
    • 可以直接通过插件市场引入:插件市场
    • demo/uni-app 文件夹下是一个示例程序,可供参考

其他框架中使用可见:在其他框架中使用

组件属性

属性 类型 默认值 必填 说明
html String/Array 要显示的富文本数据,格式同 rich-text
tag-style Object 设置标签的默认样式
autocopy Boolean true 是否允许链接受到点击时自动复制链接(仅限 http 开头的网络链接)
autopause Boolean true 是否允许播放视频时自动暂停其他视频
autopreview Boolean true 是否允许点击图片时自动预览
autosetTitle Boolean true 是否自动将 title 标签的内容设置到页面标题上
domain String 主域名,设置后将对于图片地址将自动拼接主域名或协议名
img-mode String default 图片显示模式
lazy-load Boolean false 是否开启图片懒加载
selectable Boolean false 是否允许长按复制内容
show-with-animation Boolean false 是否使用渐显动画
animation-duration Number 400 动画持续时间
use-anchor Boolean false 是否使用页面内锚点
use-cache Boolean false 是否使用缓存,设置后将会把解析结果进行缓存,下次打开不用重复解析

详细可见:组件属性

回调函数

名称 功能 说明
bindparse 在解析完成时调用 返回解析结果(一个 nodes 数组,仅传入的 html 类型为 String 时会触发),可以对该结果进行自定义修改,将在渲染时生效
bindready 渲染完成时调用 返回 boundingClientRect 的查询结果(包含宽高、位置等信息)
binderror 出错时调用 返回一个 object,其中 source 是错误来源,errMsg 为错误信息,errCode 是错误代码(仅ad),target 包含出错标签的具体信息,context 是视频的 context 对象
bindimgtap 在图片受到点击时调用 返回一个 object,其中 src 是图片链接,ignore 是一个函数,在回调函数中调用将不进行预览;可用于阻挡 onShow 的调用
bindlinkpress 在链接受到点击时调用 返回一个 object,其中 href 是链接地址,ignore 是一个函数,在回调中调用将不自动跳转/复制;开发者可以在该回调中进行进一步操作,如下载文档和打开等

详细可见:回调函数

使用外部样式

如果需要使用一些固定的样式,可以通过wxss / css文件引入
/Parser/trees/trees.wxss(css)中通过@import引入自定义的样式文件即可

/*
* Parser/trees/trees.wxss(css)
* 在这里引入您的自定义样式
*/
@import "external.wxss(css)";

更多信息可见:使用方法

补丁包

patches文件夹中准备了一些补丁包,可根据需要选用,可以实现更加丰富的功能
具体信息见:补丁包

案例体验

富文本插件 多么生活 SteamCN 蒸汽动力论坛
恋爱宝典xcx 恋爱宝典(QQ)

欢迎添加:链接

后端解析

  本插件提供了一个配套的后端node.js支持包,可以提供更加强大的功能,如匹配多层的style,代码高亮,直接打开网址,解析markdown等,其返回值可以直接作为本组件的html属性的值;且在后端提前完成解析后可以节省解析时间,提高性能。
注意:该包需要node.js v7.6.0以上运行环境,无法直接在小程序前端使用,建议部署在服务器或云函数上

详细文档参考: npm链接

许可与支持

  • 许可
    您可以随意的使用和分享本插件 MIT License
  • 支持
    支持

更新日志

  • 2019.12.30

    1. A 增加支持 svg 系列标签(通过转换为 img 实现,不可预览,不可响应点击事件) 详细
    2. U 减小了解析结果的大小(去除了一些不必要的内容,约减小 3%),减小了包的大小
    3. U h1-6 标签支持通过组件递归显示(即可以在其中使用图片、链接等)
    4. U 解决了 Audits 测评中 a 标签可点击元素的响应区域过小的问题
    5. F 修复了一个样式优先级的错误(属性样式的优先级应该最低)详细
  • 2019.12.21

    1. F 修复了使用 font 标签的 size 属性报错的问题 详细
  • 2019.12.15:

    1. A 增加 setContentapi,用于设置 string 类型的数据,可以减少一次 setData 详细
    2. A 增加 imgListapi,可以获取封面、设置缩略图等 详细
    3. U a 标签支持了 app-idpath 属性,可以跳转其他小程序(需要在 app.json 中配置跳转名单)
    4. U domain 属性支持自动补全 cssurl 的路径
    5. U cache-id 属性更名为 use-cache,只用选择是否使用缓存即可,缓存 id 会自动通过 hash 函数获取
    6. U html 属性传入 array 类型时即使没有设置 continue,组件也会自动进行设置(即可以传入和 rich-text 完全相同的格式)详细
    7. U 所有内置样式选择器名改为以下划线开头,避免与自定义样式的选择器冲突
    8. U document 补丁包增加 getStylesetStyle 方法(返回值格式有更改) 详细
    9. D 废弃了 html 属性的 object 类型,请直接将 html 设置成原 object.nodes(即 array 类型,imgList 等其他信息可直接从 nodes 中获取) 详细
    10. D 删除了 animation-duration 属性,需要修改动画时长的,可直接在 index.js 中修改
    11. D 不再对百度版插件包进行维护,如有需要可从过去版本获取
  • 2019.12.10:

    1. A 增加了 cache-id 属性,可以将解析结果缓存到 globalData 中,多次打开不用重复解析 详细
    2. A 增加了 getTextapi,可以获取到一个富文本中的所有文本内容 详细
    3. A 增加了 getVideoContextapi,可以获取到视频的 context 对象,用于操作播放状态 详细
    4. A 增加了 highlight 代码高亮处理接口 详细
    5. A 增加了长内容的解决方案 详细
    6. U 重构了解析脚本,提高了解析速度,减小了包的大小
    7. U 解决了微信最新版开发者工具会报 wx:key="" does not look like a valid key name 的警告的问题
    8. U error 回调将返回该视频的 context 对象,可以修改播放源 详细
    9. F 修复了 uni-app 包编译到 H5 时在微信内置浏览器中无法显示、存在多个 parser 标签时相互覆盖等问题 详细

    此版本较之前版本在 api 和补丁包的引入方式上有不兼容的地方,请注意

  • 2019.12.3:

    1. A 增加了 domain 属性,可以设置主域名,设置后对于图片链接将自动拼接上主域名或协议名 详细
    2. A 增加了 use-anchor 属性,可以设置页面内锚点 详细
    3. U CssHandler 补丁包增加支持 beforeafter 伪类
  • 2019.11.29:

    1. U linkpress, imgtap 回调中增加一个 ignore 函数,在回调中调用此函数将不自动进行链接跳转/图片预览操作,可以屏蔽指定的链接/图片或进行自定义操作 详细
  • 2019.11.28:

    1. U table 标签支持了 border, cellpadding, cellspacing 属性 详细
    2. U 重构了 uni-app 包编译到 H5 时的显示方式,采用 html 原生的标签渲染,实现了以下优化(仅针对 H5 平台,其他不变):
      • 支持所有浏览器支持的标签和属性
      • style 标签支持所有浏览器支持的选择器
      • error 回调增加支持 img,且返回组件的 DOM 实例,修改属性后可以直接对页面生效
        另外,通过一些转换,原来的属性和事件依然全部支持(不再有 parser 回调,因为不进行解析)

更多可见:更新日志

About

小程序富文本插件,支持丰富的标签,无层数限制,容错性强且轻量化,支持在各类框架中使用

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 75.0%
  • Vue 25.0%