小程序富文本插件,详见 文档
-
支持解析
style标签中的全局样式
支持解析和匹配style标签中的样式<parser html="{{html}}" />
Page({ 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}}" />
Page({ 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;' } } })
-
支持多资源加载
支持在video和audio标签中设置多个source标签,本插件将按顺序进行加载,若前面的链接无法播放,将自动切换下一个链接进行加载和播放,直到最后一个链接;可用于解决平台差异,最大程度避免无法播放<video controls> <source src="demo1.mov" /> <source src="demo2.webm" /> </video>
支持在
picture标签中使用source标签,通过设置media属性可以给不同大小屏幕的设备设置不同的图片链接<picture> <source media="(min-width:400px)" src="high-quality.jpg"> <source media="(min-width:250px)" src="middle-quality.jpg"> <img src="low-quality.jpg" /> </picture>
更多功能可见:功能介绍
| 名称 | 大小 | 使用 |
|---|---|---|
| parser | 44.2KB | 微信小程序插件包 |
| parser.min | 29.8KB | 微信小程序插件包压缩版(功能相同) |
| parser.uni | 57.7KB | uni-app 插件包(可以编译到所有平台) |
百度版从 20191215 起不再维护,可从过去版本中获取(Parser.bd)
-
复制
parser文件夹至components目录 -
在需要使用页面的
json文件中添加{ "usingComponents": { "parser":"/components/parser/parser" } } -
在需要使用页面的
wxml文件中添加<parser html="{{html}}" />
-
在需要使用页面的
js文件中添加data: { html:"<div>Hello World!</div>" }
demo/wx文件夹下的是微信小程序富文本插件示例程序的源码,可供参考
-
复制
parser.uni包到components目录下(更名为jyf-parser) -
在需要使用页面的
vue文件中添加<template> <view> <jyf-parser :html="html"></jyf-parser> </view> </template> <script> import parser from "@/components/jyf-parser/jyf-parser"; // HBuilderX 2.5.5 及以上可以不需要引入 export default { // HBuilderX 2.5.5 及以上可以不需要引入 components: { "jyf-parser": parser }, data() { return { html: '<div>Hello World!</div>' } } </script>
- 可以直接通过 插件市场 引入
demo/uni-app文件夹下是一个示例程序,可供参考
其他框架中使用可见:在其他框架中使用
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| html | String/Array | 是 | 要显示的富文本数据,格式同 rich-text | |
| autopause | Boolean | true | 否 | 是否允许播放视频时自动暂停其他视频 |
| autosetTitle | Boolean | true | 否 | 是否自动将 title 标签的内容设置到页面标题 |
| compress | Number | 0 | 否 | 压缩等级,可以选择是否移除 id 和 class |
| domain | String | 否 | 主域名,设置后将给链接自动拼接主域名或协议名 | |
| lazy-load | Boolean | false | 否 | 是否开启图片懒加载 |
| selectable | Boolean | false | 否 | 是否允许长按复制内容 |
| show-with-animation | Boolean | false | 否 | 是否使用渐显动画 |
| tag-style | Object | 否 | 设置标签的默认样式 | |
| use-anchor | Boolean | false | 否 | 是否使用页面内锚点 |
| use-cache | Boolean | false | 否 | 是否使用缓存,设置后多次打开不用重复解析 |
详细可见:组件属性
| 名称 | 功能 | 说明 |
|---|---|---|
| bindparse | 解析完成时触发 | 返回解析结果(一个 nodes 数组,仅传入的 html 类型为 String 时会触发),可以对该结果进行自定义修改,将在渲染时生效 |
| bindload | dom 加载完成时触发 | 所有节点被添加到节点树中时触发,无返回值,可以调用 api |
| bindready | 渲染完成时触发 | 返回 boundingClientRect 的查询结果(包含宽高、位置等信息),所有图片(除懒加载)加载完成时才会触发,图片较大时可能 延时较长 |
| binderror | 出错时触发 | 返回一个 object,其中 source 是错误来源,errMsg 为错误信息,errCode 是错误代码(仅ad),target 包含出错标签的具体信息,context 是视频的 context 对象 |
| bindimgtap | 图片被点击时触发 | 返回一个 object,其中 src 是图片链接,ignore 是一个函数,在回调函数中调用将不进行预览 |
| 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) | 程序员技术之旅 | 古典文学名著阅读 |
|---|---|---|---|
欢迎添加:链接
- 许可
您可以随意的使用和分享本插件 MIT License - 支持
-
2020.3.23
A增加了audio的补丁包(替代被废弃的原生audio)详细U通过eslint检查规范和修复了一些问题
-
2020.3.21
U没有使用colspan和rowspan的表格里的链接可以点击
-
2020.3.20
-
2020.3.17 beta
-
U通过image(经过一些处理后)来显示图片(替代rich-text),可以实现以下优化(仅微信包):2.3.0起支持云文件ID2.7.0起支持长按弹出菜单(可以识别小程序码,同时去除了imglongtap事件)2.9.0起支持webp图片- 使用
image原生的lazy-load,可能具有更好的性能 - 加载错误时能够触发
error事件,且可以重设src详细
可能存在的问题:
若没有设置大小图片会在加载完成后突然从默认大小(300 × 100)变为原大小(图片较大,加载较慢时较明显),可以在trees.wxss的._img中调整默认大小 -
Ua标签支持:visited效果(默认变为紫色,可在trees.wxss中调整) -
F修复了a标签所在段落使用一些特殊实体编码时可能导致错误换行的问题 详细 -
F修复了uni-app包H5端在创建时设置数据无法显示的问题 详细
-
-
2020.3.12
-
2020.3.7
-
2020.3.1
-
2020.2.26
A添加了parser-group补丁包 详细Uuni-app包App端支持a标签链接为文档时自动下载和打开,v3支持embed标签F修复了部分情况下连续实体编码失效的问题
更多可见:更新日志