小程序富文本插件(本文档动态更新,建议 star
收藏)
新版文档链接:Parser插件文档
-
支持解析
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>
更多功能可见:功能介绍
名称 | 大小 | 使用 |
---|---|---|
parser | 48.2KB | 微信小程序插件包 |
parser.min | 32.3KB | 微信小程序插件包压缩版(功能相同) |
parser.uni | 62.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 标签的内容设置到页面标题 |
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 时会触发),可以对该结果进行自定义修改,将在渲染时生效 |
bindready | 渲染完成时触发 | 返回 boundingClientRect 的查询结果(包含宽高、位置等信息) |
binderror | 出错时触发 | 返回一个 object,其中 source 是错误来源,errMsg 为错误信息,errCode 是错误代码(仅ad),target 包含出错标签的具体信息,context 是视频的 context 对象 |
bindimgtap | 图片被点击时触发 | 返回一个 object,其中 src 是图片链接,ignore 是一个函数,在回调函数中调用将不进行预览 |
bindimglongtap | 图片被长按时触发 | 返回一个 object,其中 src 是图片链接 |
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.2.17
A
增加了imglongtap
事件,图片被长按时触发,可用于显示自定义菜单 详细U
优化了双击缩放的效果U
图片设置的宽度超出屏幕宽度时自动将高度设置为auto
,避免变形(同时移除了img-mode
属性)U
修改了部分文件和文件夹的命名(引入路径有变化)详细D
移除了autocopy
和autopreview
属性,如果需要禁用自动预览/复制链接,请使用linkpress
和imgtap
事件中的ignore
函数D
移除了versionHigherThan
、parseHtml
、parseCss
的api
D
废弃了后端加强包
此版本移除了部分冗余功能,与之前版本存在部分不兼容情况,请注意
-
2020.2.12
A
增加了gesture-zoom
属性,可以设置双击缩放(默认false
)U
uni-app
包修改命名使得符合easycom
规则(HBuilder X 2.5.5
以上可以直接使用,无需引入;之前版本的引入路径有变化)详细
-
2020.1.23
A
添加了一个打包工具 详细U
支持rpx
单位
-
2020.1.19
U
video
标签增加支持poster
属性F
修复了部分情况下表格处理出错的问题 详细F
修复了使用单独的</p>
出错的问题F
修复了uni-app
包width
属性处理出错的问题
-
2020.1.18
U
domain
属性支持自动填充所有src
属性的值(包括视频、音频、图片;协议名默认http
)U
优化了实体的处理(支持所有形如{
的实体编码)F
修复了图片一开始裂开之后又好了的问题
更多可见:更新日志