import java.io.File
import java.util.ArrayList
import java.util.HashMap
import java.util.List
import java.util.Map
import org.dom4j.Document
import org.dom4j.DocumentException
import org.dom4j.Element
import org.dom4j.io.SAXReader
import com.atom.basic.columntree.ColumnTree
import com.atom.biz.base.calendar.bean.CalenderNode
import com.atom.biz.base.setup.BaseSetupNode
/**
* <p>
* *** 作xml文件类
* </p>
* xml 文件格式为
*
* <tables><table><col name="" value="" /><col name="" value="" /></table><table></table></tables>
*
* @author KHT * @version $Id: XmlUtil.java,v 0.1 2009-2-22 下午10:49:02 */
public class XmlUtil {
/**
* <p>
* 读取数据的xml文件
* </p>
*
* @author Jack Zhou
* @version $Id: XmlUtil.java, */
@SuppressWarnings("unchecked")
public static List<BaseSetupNode>readBaseNodes(String path) {
List<BaseSetupNode>list = new ArrayList<BaseSetupNode>()
SAXReader reader = new SAXReader()
Document doc = null
String leaf = ""
try {
// 读取文件
File in = new File(path)
doc = reader.read(in)
Element root = doc.getRootElement()
List<Element>eles = root.elements("nodes")
List<Element>cols = null
for (Element ele : eles) {
cols = ele.elements()
for (Element element : cols) {
BaseSetupNode node = new BaseSetupNode()
node.setFz(element.attributeValue("fz"))
node.setMc(element.attributeValue("mc"))
node.setSm(element.attributeValue("sm"))
leaf = element.attributeValue("leaf")
node.setUiProvider("col")
node.setId(element.attributeValue("id"))
node.setParentId(element.attributeValue("parantid"))
node.setHref(element.attributeValue("href"))
if ("".equals(leaf) || "0".equals(leaf)) {
node.setLeaf(false)
node.setIconCls("task")
} else {
node.setLeaf(true)
node.setIconCls("task-folder")
}
list.add(node)
}
}
} catch (DocumentException e) {
e.printStackTrace()
}
return list
}
public static List<CalenderNode>readCalenderNodes(String path) {
List<CalenderNode>list = new ArrayList<CalenderNode>()
SAXReader reader = new SAXReader()
Document doc = null
String leaf = ""
try {
// 读取文件
File in = new File(path)
doc = reader.read(in)
Element root = doc.getRootElement()
List<Element>eles = root.elements("nodes")
List<Element>cols = null
String isv = ""
for (Element ele : eles) {
cols = ele.elements()
for (Element element : cols) {
CalenderNode node = new CalenderNode()
node.setDateType(element.attributeValue("dateType"))
node.setDateName(element.attributeValue("dateName"))
node.setDate(element.attributeValue("date"))
node.setMemo(element.attributeValue("memo"))
isv = element.attributeValue("visible")
if (!StringUtil.isEmpty(isv))
node
.setVisible("<img src='/public/images/Checkmark4.gif' />")
else
node.setVisible("-")
leaf = element.attributeValue("leaf")
node.setUiProvider("col")
node.setId(element.attributeValue("id"))
node.setParentId(element.attributeValue("parantid"))
node.setHref(element.attributeValue("href"))
if ("".equals(leaf) || "0".equals(leaf)) {
node.setLeaf(false)
node.setIconCls("task")
} else {
node.setLeaf(true)
node.setIconCls("task-folder")
}
list.add(node)
}
}
} catch (DocumentException e) {
e.printStackTrace()
}
return list
}
@SuppressWarnings("unchecked")
public List<Map<String, String>>readMapTest() {
List<Map<String, String>>list = new ArrayList<Map<String, String>>()
String path = this.getClass().getResource("/").getPath()
+ "/xml/test.xml"
SAXReader reader = new SAXReader()
Document doc = null
try {
// 读取文件
File in = new File(path)
doc = reader.read(in)
Element root = doc.getRootElement()
List<Element>eles = root.elements("nodes")
List<Element>cols = null
for (Element ele : eles) {
cols = ele.elements()
for (Element element : cols) {
Map<String, String>map = new HashMap<String, String>()
map.put("childrows", element.attributeValue("childrows"))
map.put("hc0", element.attributeValue("hc0"))
map.put("hc1", element.attributeValue("hc1"))
map.put("hc2", element.attributeValue("hc2"))
map.put("hc3", element.attributeValue("hc3"))
map.put("hasnote", element.attributeValue("hasnote"))
map.put("urid", element.attributeValue("urid"))
map.put("entityid", element.attributeValue("entityid"))
map.put("bankid", element.attributeValue("bankid"))
list.add(map)
}
}
} catch (DocumentException e) {
e.printStackTrace()
}
return list
}
public static void main(String[] args) {
XmlUtil xml = new XmlUtil()
String path = xml.getClass().getResource("/").getPath()
List<BaseSetupNode>nodes = XmlUtil.readBaseNodes(path
+ "/xml/base.xml")
ColumnTree t = new ColumnTree()
System.out.println(t.getJsonString(nodes))
// System.out.println(nodes.size())
// System.out.println(path)
}
}
html铺满整个页面html铺满整个页面_小程序富文本(HTML+MarkDown),200+种语言代码高亮支持
蓝丨飘
原创
关注
0点赞·164人阅读
介绍
今天为大家带来的是一个用于在微信小程序中渲染html和Markdown的富文本组件,而且支持代码高亮,它就是html2wxml!
Github
https://github.com/qwqoffice/html2wxml
三种版本介绍
插件版本准备
1、打开小程序管理后台,转到设置 - 第三方服务,点击添加插件
2、搜索 html2wxml ,选中并添加
3、添加成功
4、回到小程序开发环境,编辑 app.json ,添加插件声明,最新版为 1.3.0
"plugins": { "htmltowxml": { "version": "1.3.0", "provider": "wxa51b9c855ae38f3c" } }
登录后复制
5、在对应页面的 json 文件,比如首页 index.json,添加使用插件组件的声明
"usingComponents": { "htmltowxml": "plugin://htmltowxml/view" }
登录后复制
组件版本准备
1、复制整个 html2wxml-component 文件夹到小程序目录
2、在对应页面的 json 文件,比如首页 index.json,添加使用组件的声明,注意路径
"usingComponents": { "htmltowxml": "path/to/html2wxml-component/html2wxml" }
登录后复制
模板版本准备
1、复制整个 html2wxml-template 文件夹到小程序目录
2、在对应页面的 js 文件,比如首页 index.js,添加引用声明,并使用html2wxml方法进行数据绑定,注意路径,参数分别为绑定的数据名、已解析的富文本数据、当前页面对象和容器与屏幕边缘的单边的距离
var html2wxml = require('path/to/html2wxml-template/html2wxml.js')html2wxml.html2wxml('article', res.data, this, 5)
登录后复制
3、在对应页面的 wxml 文件,比如首页 index.wxml,添加引用模板的声明,并使用模板,注意路径和绑定的数据名
登录后复制
4、在对应页面的 wxss 文件,比如首页 index.wxss或app.wxss, 引入样式表和你喜欢的代码高亮样式,注意路径
@import "path/to/html2wxml-template/html2wxml.wxss"@import "path/to/html2wxml-template/highlight-styles/darcula.wxss"
登录后复制
组件使用
示例
// 将Page中的content数据作为HTML格式渲染// 禁用代码高亮功能// 禁用代码行号显示功能// 代码高亮样式改为tomorrow// 设置代码高亮检测语言 (最多6个,自行搭建服务不受限制)// 对HTML数据中的img标签的相对路径补全域名// 禁用加载中动画// 将Page中的text数据作为Markdown格式渲染// 直接渲染Page中的已经过解析的obj数据
登录后复制
服务端用法
富文本的解析默认是由QwqOffice完成,存在不稳定因素,你可以自行搭建解析服务或将解析组件引入到你的项目中。
1、复制整个 html2wxml-php 文件夹到项目目录中
2、引入类文件class.ToWXML.php
include( 'path/to/html2wxml-php/class.ToWXML.php' )
登录后复制
3、实例化html2wxml,进行解析并输出,示例:
$towxml = new ToWXML()$json = $towxml->towxml( '
登录后复制
H1标题
', array( 'type' =>'html', 'highlight' =>true, 'linenums' =>true, 'imghost' =>null, 'encode' =>false, 'highlight_languages' =>array( 'html', 'js', 'php', 'css' ) ) )echo json_encode( $json, JSON_UNESCAPED_UNICODE )
可用的代码高亮语言
html铺满整个页面
眼镜店选址
精选推荐
广告
var源码matlab-html2wxml:用于微信小程序HTML和Markdown格式的富文本渲染组件,支持代码高亮
2下载·0评论
2021年5月19日
用于微信小程序的HTML和Markdown格式的富文本渲染组件支持代码高亮
1下载·0评论
2019年8月10日
带格式粘贴至html富文本,防止复制/粘贴将网页样式复制到富文本编辑器
565阅读·0评论·0点赞
2021年6月13日
微信小程序使用html2wxml渲染HTML或Markdown文本
1295阅读·0评论·0点赞
2020年5月16日
html转pdf汉字重叠,富文本编辑器保存的html内容使用itextpdf转PDF文件(css提取,内容重叠)问题解决...
458阅读·0评论·0点赞
2021年6月9日
让小程序支持代码高亮
383阅读·0评论·0点赞
2021年8月13日
高清播放机,图片大全,点击查看详情!
精选推荐
广告
HTML让背景图片铺满整个图片
1.1W阅读·0评论·4点赞
2022年4月25日
不使用插件,小程序也能完整的渲染富文本(视频展现,图片自适应)
1505阅读·3评论·5点赞
2022年3月17日
微信小程序渲染富文本
441阅读·0评论·0点赞
2020年11月10日
小程序渲染富文本内容
5270阅读·0评论·2点赞
2019年1月28日
浏览器中的HTML富文本编辑(一)
480阅读·0评论·0点赞
2013年3月12日
简单封装 wangEditor富文本编辑器,保留大部分粘贴样式
818阅读·0评论·1点赞
2021年12月20日
[贝聊科技]在微信小程序中渲染HTML内容
567阅读·0评论·0点赞
2018年9月14日
微信小程序渲染富文本(html标签)
8058阅读·0评论·5点赞
2019年7月2日
微信小程序Markdonw、HTML富文本内容显示解决办法
1.6W阅读·4评论·2点赞
2017年6月3日
搞定了微信小程序富文本渲染解决方案-后端渲染方案Html2Wxml2J
1162阅读·0评论·1点赞
2018年11月18日
html-to-wxml-小程序中将html内容转化成wxml可以显示的内容,方便用于小程序中显示.zip
2下载·0评论
2019年9月23日
如何让表格(table)充满整个页面
2.5W阅读·6评论·2点赞
2008年7月17日
Towxml是一个可将HTMLMarkdown转为微信小程序WXML的渲染库
4下载·0评论
2019年8月10日
wxParse 微信小程序富文本解析自定义组件,支持HTML及markdown解析
8下载·0评论
2017年9月30日
去首页
看看更多热门内容
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)