小程序富文本插件,详见 文档
- 支持匹配
style
中的样式 - 支持
svg
- 支持锚点跳转
- 支持长按复制内容
- 支持给多媒体标签设置多个源
- 支持自动给链接填充主域名
- 支持几乎所有的
html
标签 - 支持丰富的事件和效果
- 轻量化、效率高、容错性强
- 支持多平台(微信、QQ、百度、头条、uni-app 等)
...
更多功能可见:功能介绍
名称 | 大小 | 使用 |
---|---|---|
parser | 41.1KB | 微信小程序插件包 |
parser.min | 27.7KB | 微信小程序插件包压缩版(功能相同) |
parser.qq | 40.7KB | QQ 小程序插件包 |
parser.bd | 39.4KB | 百度小程序插件包 |
parser.tt | 39.9KB | 头条小程序插件包 |
parser.uni | 58.3KB | uni-app 插件包(可以编译到所有平台) |
-
复制
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 | 否 | 是否允许播放视频时自动暂停其他视频 |
autoscroll | Boolean | false | 否 | 是否自动给 table 加一个滚动层(使表格可以单独滚动) |
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
文件夹中准备了一些扩展包,可根据需要选用,可以实现更加丰富的功能
具体信息见:扩展包
富文本插件 | 程序员技术之旅 | APP 比比 | 全品作业小助手 |
---|---|---|---|
![]() |
![]() |
![]() |
多么生活 | 恋爱宝典 xcx | 古典文学名著阅读 | 典典博客 |
---|---|---|---|
![]() |
![]() |
以上排名不分先后,更多可见:链接(欢迎添加)
-
许可
您可以随意的使用和分享本插件 MIT License
不可用于任何违法用途
在用于生产环境前务必经过充分测试,由插件bug
带来的损失概不负责(可以自行修改源码)
-
2020.5.13
A
添加了autoscroll
属性,可以给所有表格添加一个滚动层 详细U
a
标签可以跳转到tabbar
页面U
通过stylelint
规范css
写法U
为避免在一些框架中使用出现文件不存在的错误,扩展包不再默认引入(原来是在try
中require
)U
uni-app
包编译到百度小程序中实现了autopause
属性U
uni-app
包添加了组件文档注释,输入时可以有提示D
移除了gesture-zoom
属性D
移除了preLoad
的api
-
2020.5.11
A
增加百度小程序原生包 详细F
修复了微信小程序电脑端rpx
可能换算不正确的问题F
修复了上一版本个别情况下可能出现Cannot read property 'name' of undefined
的问题F
修复了uni-app
包编译到百度小程序时br
标签可能不生效的问题
-
2020.5.8
F
修复了个别情况下空格被错误过滤的问题 详细D
移除了xml
属性(svg
标签默认按xml
方式解析,可以以<svg />
方式结束)D
取消对picture
标签的支持
-
2020.5.6
F
修复了头条小程序真机图片可能无法显示的问题 详细F
修复了 CssHandler 扩展包 后代选择器优先级低于id
选择器的问题 详细
-
2020.4.26
F
修复了个别情况下图片表现不正常的问题
-
2020.4.25
U
优化了图片的显示方式(可解决加载完毕时大小突变的问题,但不再支持云文件ID
和webp
图片)详细U
支持在链接中使用实体编码U
模拟实现的列表(内含图片链接)支持list-style:none
U
navigateTo
的api
增加一个offset
参数,可设置偏移量U
uni-app
包支持使用audio
扩展包F
修复了个别情况下图片宽度过宽的问题F
修复了 CssHandler 扩展包class
匹配错误的问题 详细F
修复了uni-app
包编译到NVUE
时在ready
前设置数据可能无法显示的问题F
修复了uni-app
包编译到App
时视频可能无法显示的问题F
修复了uni-app
包编译到H5
时tag-style
中的rpx
失效的问题
-
2020.4.19
F
修复了 原生包 部分情况下table
中在td
外有文本节点会导致解析错误的问题F
修复了uni-app
包无法使用 document 扩展包 的问题(并增加了一些方法) 详细
-
2020.4.17
F
修复了uni-app
包NVUE
端打包到安卓后可能白屏的问题(另外由于不再通过本地文件中转,显示速度应该更快)
-
2020.4.16
U
uni-app
包用通过image
(经过一些处理后)来显示图片(替代rich-text
),可以实现以下优化:- 百度、支付宝(1.9.0)、头条小程序支持
lazy-load
,微信和App
也采用image
自带的lazy-load
,可能性能更好 img
出错时也会触发error
事件,且可以通过context
重设src
详细- 微信端还可以支持云文件
ID
(2.3.0),长按弹出菜单(2.7.0),支持webp
图片(2.9.0)
- 百度、支付宝(1.9.0)、头条小程序支持
F
uni-app
包修复了NVUE
中使用可能空白的问题
-
2020.4.14
A
增加QQ
小程序原生包 详细U
头条小程序包优化实体编码处理U
uni-app
包nvue
端实现了navigateTo
和preLoad
的api
更多可见:更新日志