小程序富文本插件(本文档动态更新,建议加星收藏)
新版文档链接: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;' } }
-
支持多资源加载
支持在video
和audio
标签中设置多个source
标签,本插件将按顺序进行加载,若前面的链接无法播放,将自动切换下一个链接进行加载和播放,直到最后一个链接;可用于解决平台差异,最大程度避免无法播放<video controls> <source src="demo1.mov" /> <source src="demo2.webm" /> </video>
更多功能可见:功能介绍
名称 | 大小 | 使用 |
---|---|---|
Parser | 47.1KB | 微信小程序插件包 |
Parser.min | 31.6KB | 微信小程序插件包压缩版(功能相同) |
Parser.uni | 62.0KB | uni-app 插件包(可以编译到所有平台) |
百度版从 20191215
起不再维护,可从过去版本中获取(Parser.bd
)
- 下载
Parser
文件夹至小程序目录 - 在需要引用的页面的
json
文件中添加(百度小程序中组件名一定要小写){ "usingComponents": { "parser":"/Parser/index" } }
- 在需要引用的页面的
wxml
文件中添加<parser html="{{html}}" />
- 在需要引用的页面的
js
文件中添加data: { html:"<div>Hello World!</div>" }
demo/wx
文件夹下的是微信小程序富文本插件
示例程序的源码,可供参考
- 使用
uni-app
包(可以编译到所有小程序平台)- 下载
Parser.uni
包到components
目录下(更名为Parser
) - 在需要使用页面的
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 - 支持
- 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
修复了图片一开始裂开之后又好了的问题
- 2019.1.7
U
支持模拟显示li
,ol
,ul
标签(即可以在其中放图片、链接、视频等,支持ol
的type
属性,支持多层ul
,暂不支持list-style
的css
样式)D
删除了List
补丁包(在主包中已经默认支持)F
修复了传入的html
为数组时预览图片会出现预览顺序颠倒的问题
- 2020.1.5
U
uni-app
支持APP
的v3
模式编译U
精简和优化了部分代码
- 2019.12.30
更多可见:更新日志