All Projects → jingjingke → richTextParse

jingjingke / richTextParse

Licence: other
微信小程序富文本解析(仅支持HTML),在rich-text标签引用结果“树”

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to richTextParse

Jeewx
JAVA版免费微信管家系统。支持微信公众号、微信企业号、支付宝服务窗等多触点管理。Jeewx实现了微信、支付窗、微信企业号的基础管理功能,便于用户二次开发。2014年荣获CSDN开发商大会第一名
Stars: ✭ 365 (+588.68%)
Mutual labels:  weixin, xiaochengxu
Juejin
💰 Unofficial JueJin wechat mini program application - 掘金非官方微信小程序
Stars: ✭ 771 (+1354.72%)
Mutual labels:  weixin, xiaochengxu
My Shop
my-shop基于Spring+SpringMVC+Mybatis+Shiro+redis+Vue+Swagger2小程序商城+(vue)微信商城+综合管理后台+网站商城+运营商平台+APP平台+第三方平台 = 综合一体化平台.前后端分离,分布式敏捷开发系统架构,提供整套公共微服务服务模块:内容管理、支付中心、用户管理(包括第三方)、微信平台、存储系统、配置中心、日志分析、任务和通知等,支持服务治理、监控和追踪,努力为中小型企业打造全方位J2EE企业级开发解决方案, 致力打造通用综合一体化管理平台。官方qq群:711281203,群2:685261895 (如有问题,请联系,小天qq:2366307000)
Stars: ✭ 359 (+577.36%)
Mutual labels:  weixin, xiaochengxu
Weapp Douban Film
微信小程序-豆瓣电影
Stars: ✭ 303 (+471.7%)
Mutual labels:  weixin, xiaochengxu
Wemark
微信小程序Markdown渲染库
Stars: ✭ 1,159 (+2086.79%)
Mutual labels:  weixin, xiaochengxu
Jeewx Boot
JAVA版免费开源的微信管家平台。支持微信公众号、小程序、第三方平台等。平台已经实现了公众号基础管理、群发、系统权限、抽奖活动、小程序官网等功能,便于二次开发,可以快速搭建微信应用!
Stars: ✭ 789 (+1388.68%)
Mutual labels:  weixin, xiaochengxu
Quietweather
☀️ Develop a weather wechat mini program application in two days - 两天撸一个天气应用微信小程序
Stars: ✭ 677 (+1177.36%)
Mutual labels:  weixin, xiaochengxu
jeewx-boot
JAVA版免费开源的微信管家平台。支持微信公众号、小程序、第三方平台等。平台已经实现了公众号基础管理、群发、系统权限、抽奖活动、小程序官网等功能,便于二次开发,可以快速搭建微信应用!
Stars: ✭ 992 (+1771.7%)
Mutual labels:  weixin, xiaochengxu
Xiaochengxu demos
小程序优秀项目源码汇总,每个项目都有图有源码,零基础学微信小程序,小程序表格,小程序视频,小程序视频弹幕,小程序仿天猫大转盘抽奖等源码,小程序云开发,小程序发邮件,小程序支付,微信支付,持续更新。。。
Stars: ✭ 855 (+1513.21%)
Mutual labels:  weixin, xiaochengxu
Wxopenclub Wxapp Lessons
60 节微信小程序开发视频教程配套源代码
Stars: ✭ 798 (+1405.66%)
Mutual labels:  weixin, xiaochengxu
H5huodong
此地址项目不再维护,代码迁移至 https://github.com/zhangdaiscott/jeewx-boot
Stars: ✭ 209 (+294.34%)
Mutual labels:  weixin, xiaochengxu
miniprogram
微信小程序过审指南
Stars: ✭ 96 (+81.13%)
Mutual labels:  weixin, xiaochengxu
wechat-redirect
📨微信跳转-微信浏览器中直接唤起本地浏览器和App
Stars: ✭ 67 (+26.42%)
Mutual labels:  weixin
atool-weixin
在线工具(atool-org)微信公众号代码
Stars: ✭ 18 (-66.04%)
Mutual labels:  weixin
rich-text
A set of companion packages for GraphCMS's Rich Text Field
Stars: ✭ 62 (+16.98%)
Mutual labels:  rich-text
some-demo
some demo
Stars: ✭ 33 (-37.74%)
Mutual labels:  weixin
miniprogram
[微信小程序/小游戏] A fast wechat miniprogram/minigame development sdk written in Golang
Stars: ✭ 52 (-1.89%)
Mutual labels:  weixin
richvariables
DEPRECATED Allows you to easily use Craft Globals as variables in Rich Text fields
Stars: ✭ 44 (-16.98%)
Mutual labels:  rich-text
CSWeiXin
C#版微信
Stars: ✭ 16 (-69.81%)
Mutual labels:  weixin
qyweixin
微信企业号接口 (http://qy.weixin.qq.com)
Stars: ✭ 16 (-69.81%)
Mutual labels:  weixin

微信小程序富文本解析 - richTextParse。

将请求到的HTML代码转化为rich-text标签中nodes属性支持的JSON格式,从而实现在微信小程序中的可视化。因为是根据我自己的需求去做的,所以目前功能比较简单。

在此推荐“wxParse”组件,功能比较全。但因为wxParse解析pre标签有点问题,所以才动手写了richTextParse。

richTextParse的思路就是将HTML代码解析为DOM树型结构,非常好理解。你也可以在目前代码的基础上进行更多的标签验证(目前我只验证了图像标签,在图像标签中加入src等属性),丰富代码功能。而这一切都不能离开微信小程序中的rich-text标签支持。

效果

效果图

支持Html文档中常用的标签。

使用

需要使用到的文件有两个:“richText.js”和“richText.wxss”。它们存放在:“utils/richTextParse”文件夹下。

在合适的位置引入样式,例如“app.wxss”(建议),或者在需要使用的位置,它的“*.wxss”中。

而这个功能我只有一处用到,所以直接在需要使用的位置引入JS文件即可。

引入文件

//在使用的View(pages/article/index.js)中引入
var richTextParse = require('../../utils/richTextParse/richText.js');
//在“app.wxss”中引入
@import 'utils/richTextParse/richText.wxss';

在接口获取html的位置,使用“richTextParse.go()”方法获取到解析的结果。例如我的:

解析html代码

success:function(rs){
  that.setData({
    ...
    bodyHtml: richTextParse.go(rs.data.body),
    ...
  })
}

模板中使用

而在wxml中使用rice-text即可:

<rich-text nodes='{{bodyHtml}}'></rich-text>

另外如果你有多处需要用到这一功能,建议把JS在“app.js”中引入,并且挂在App下:

var richTextParse = require('utils/richTextParse/richText.js');
App({
    ...
    richTextParse : richTextParse.go,
    ...
})

在需要使用的位置使用全局richTextParse方法即可:

var app = getApp();
Page({
    ......
             bodyHtml: app.richTextParse(rs.data.body),
    ......
})

结尾

基本功能可以使用,因为已经满足我自己的需求了,所以应该不会常更新。而如果小伙伴在使用的时候想要有什么功能的话希望可以给我提优化的意见~

2018.05.23新增代码高亮

高亮使用的prism插件

这里只使用了prism默认的样式,暂时只包含我常用的html,js,css等高亮功能,定制功能可去prism下载,只需要替换utils/richTextParse下的prism.js与prism.wxss(将prism.css重命名)并修改编辑器匹配语言的switch条件(switch语句在下面说到的98-132行内)。

注意

因为各文本编辑器存在差异,可根据自己实际情况修改utils/richTextParse/richText.js文件第98-132行。

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].