小程序富文本插件,详见 文档
-
支持解析
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属性可以给不同大小屏幕的设备设置不同的图片链接;若设置webp图片将只有android端采用,可用于兼容<picture> <source media="(min-width:400px)" src="high-quality.jpg"> <source media="(min-width:250px)" src="middle-quality.jpg"> <!--webp 图片将只有 android 端采用--> <source src="xxx.webp"> <img src="low-quality.jpg" /> </picture>
更多功能可见:功能介绍
| 名称 | 大小 | 使用 |
|---|---|---|
| parser | 43.8KB | 微信小程序插件包 |
| parser.min | 29.7KB | 微信小程序插件包压缩版(功能相同) |
| parser.uni | 57.4KB | 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 是一个函数,在回调函数中调用将不进行预览 |
| 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.3.12
A增加了compress属性,可以设置压缩等级 详细A配置项中增加了filter和onText方法,可以在解析过程中进行自定义处理 详细A增加了rect的api,可以获取内容的大小和位置 详细Upicture标签中若设置webp的source,将只有android端采用,可用于兼容 详细UsetContent的api支持传入append参数表示是否在尾部追加(用于加载更多)详细U支持通过base标签设置主域名(同domain属性,但优先级更低)F修复了在ready事件触发前再次设置数据会导致ready事件不停触发的问题
-
2020.3.7
-
2020.3.1
-
2020.2.26
A添加了parser-group补丁包 详细Uuni-app包App端支持a标签链接为文档时自动下载和打开,v3支持embed标签F修复了部分情况下连续实体编码失效的问题
-
2020.2.23
U支持自动压缩style属性,移除重复的样式,可以减少解析结果大小U支持预览base64图片(通过暂存到本地实现)UCssHandler补丁包支持属性选择器和@media,伪类中的content支持attr()详细U精简了部分代码Uuni-app包APP端支持iframe标签
-
2020.2.17
A增加了imglongtap事件,图片被长按时触发,可用于显示自定义菜单 详细U优化了双击缩放的效果U图片设置的宽度超出屏幕宽度时自动将高度设置为auto,避免变形(同时移除了img-mode属性)U修改了部分文件和文件夹的命名(引入路径有变化)详细D移除了autocopy和autopreview属性,如果需要禁用自动预览/复制链接,请使用linkpress和imgtap事件中的ignore函数D移除了versionHigherThan、parseHtml、parseCss的apiD废弃了后端加强包
此版本移除了部分冗余功能,与之前版本存在部分不兼容情况,请注意
-
2020.2.12
A增加了gesture-zoom属性,可以设置双击缩放(默认false)Uuni-app包修改命名使得符合easycom规则(HBuilder X 2.5.5以上可以直接使用,无需引入;之前版本的引入路径有变化)详细
更多可见:更新日志