用java给html文件添加必要的控制html代码片
这个需求，我估计很多时候都不会用到，但是，我们目前在做一个CMS的系统，在创建页面的时候，需要控制页面各个板块显示的内容来源，这个不是关键，关键是页面内容配置完毕后，如何提交内容，也就是说如何和后台系统通信。这个时候，有两种做法，一种是在页面的控制区域内添加右键菜单，实现这个功能。另外一个做法，就是在页面中添加按钮区域来实现。
但是不管那种做法，控制区域的html页面上的逻辑代码片，都不可能在模板里面添加，这是不友好的，客户也是不会考虑这个的，再说了，他也没有办法考虑。所以，需要CMS系统自动最近这个控制区域的html代码片。于是，java操作html的插件就诞生了！有不少类似的插件，这里我选择比较简单的jsoup插件。下面的简单实验，用到的版本是1.9.2，就一个jar包，不需要额外的资源了。
我这里上代码，分别说明右键实现，以及直接追加button的方式实现。
先说右键实现方案，这里，右键菜单是用bootstrap-contextmenu.js插件实现的，是基于bootstrap风格的。
/**
* @author "shihuc"
* @date 2016年5月21日
*/
package opc; import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter; import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements; /**
* @author "shihuc"
*
*/
public class Demo { /**
* @param args
* @throws IOException
*/
public static void main(String[] args) throws IOException {
File input = new File("./example.html");
Document doc = Jsoup.parse(input, "UTF-8");
System.out.println(doc.html());
Elements content = doc.getElementsByTag("body");
//找到body的内容
String body = content.get(0).html();
System.out.println(body); //读取控制页面右键的代码片段
File pice = new File("./pice.html");
Document pdoc = Jsoup.parse(pice, "UTF-8");
Element control_area = pdoc.getElementById("tk-cms-page-context-menu-control-area"); //将业务相关的html代码片添加到右键菜单控制区域中
control_area.append(body); //将带有业务相关代码的html内容填写到原来的example.html文件的body区域
content.get(0).html(pdoc.html()); FileOutputStream fos = new FileOutputStream("./output.html", false);
OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
osw.write(doc.html());
osw.close();
} }
这里的example.html文件的内容如下：
<!DOCTYPE HTML>
<html> <body> <div>
<h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1>
</div> </body>
</html>
那个pice.html的内容如下:
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style> <div id="context-menu" style="position: absolute; z-index: 9999; top: 746px; left: 474px;" class="">
<ul class="dropdown-menu" role="menu">
<li><a tabindex="-1">Cancel</a></li>
<li><a tabindex="-1">Action</a></li>
</ul>
</div>
<div id="tk-cms-page-context-menu-control-area" data-toggle="context" style="height:100%;width:100%;border:1px solid #ddd;" class="vCenter"> </div> <script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-contextmenu.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function(){
//屏蔽掉浏览器显示的页面中的右键菜单。
document.oncontextmenu = function(){return false;};
//启用自定义的右键菜单
$('#tk-cms-page-context-menu-control-area').contextmenu({
target: '#context-menu',
onItem: function (context, e) {
alert($(e.target).text());
}
});
})
</script>
最后生成的output.html的内容如下：
<!doctype html>
<html>
<head></head>
<body>
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style>
<div id="context-menu" style="position: absolute; z-index: 9999; top: 746px; left: 474px;" class="">
<ul class="dropdown-menu" role="menu">
<li><a tabindex="-1">Cancel</a></li>
<li><a tabindex="-1">Action</a></li>
</ul>
</div>
<div id="tk-cms-page-context-menu-control-area" data-toggle="context" style="height:100%;width:100%;border:1px solid #ddd;" class="vCenter">
<div>
<h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-contextmenu.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
$(document).ready(function(){
//屏蔽掉浏览器显示的页面中的右键菜单。
document.oncontextmenu = function(){return false;};
//启用自定义的右键菜单
$('#tk-cms-page-context-menu-control-area').contextmenu({
target: '#context-menu',
onItem: function (context, e) {
alert($(e.target).text());
}
});
})
</script>
</body>
</html>
效果如下图所示，只有在灰色框区域内容点击鼠标右键有反应，框外点击鼠标右键是没有菜单出来的，那个框，限定了菜单的有效控制范围。
下面，再来看看，直接追加button在业务模板html页面后面的实现方案。直接上代码！
example.html的部分与上面一样，不再列举，下面先说java的部分：
/**
* @author "shihuc"
* @date 2016年5月21日
*/
package opc; import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStreamWriter; import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements; /**
* @author "shihuc"
*
*/
public class Demo2 { /**
* @param args
* @throws IOException
*/
public static void main(String[] args) throws IOException {
File input = new File("./example.html");
Document doc = Jsoup.parse(input, "UTF-8");
System.out.println(doc.html());
Elements content = doc.getElementsByTag("body");
//找到body的内容
Element body = content.get(0);
System.out.println(body.html()); //读取控制页面右键的代码片段
File pice = new File("./pice2.html");
Document pdoc = Jsoup.parse(pice, "UTF-8"); //将控制页面相关逻辑代码追加到业务页面example.html的最后面。
body.append(pdoc.html()); FileOutputStream fos = new FileOutputStream("./output2.html", false);
OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8");
osw.write(doc.html());
osw.close();
} }
再来列举pice2.html的代码部分：
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style> <div id="tk-cms-op-btn" style="border:1px solid #ddd; padding: 10px 10px" class="vCenter">
<button type="button" onclick="cancel();">Cancel</button>
<button type="button" onclick="action();">Action</button>
</div> <script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function cancel(){
alert("cancel");
}
function action(){
alert("action");
}
$(document).ready(function(){ });
</script>
最后看看输出部分output2.html的代码片：
<!doctype html>
<html>
<head></head>
<body>
<div>
<h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1>
</div>
<style type="text/css">
.vCenter
{
vertical-align:middle;
margin:0 auto;
}
</style>
<div id="tk-cms-op-btn" style="border:1px solid #ddd; padding: 10px 10px" class="vCenter">
<button type="button" onclick="cancel();">Cancel</button>
<button type="button" onclick="action();">Action</button>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
function cancel(){
alert("cancel");
}
function action(){
alert("action");
}
$(document).ready(function(){ });
</script>
</body>
</html>
看看example.html模板文件在追加了控制代码片后的效果：
到此，两种通过jsoup操作html添加页面控制单元的实现方案都列举出来，读者是不是有疑问了，这两者有啥区别，或者说到底那种要好点呢？
个人觉得，第一种右键菜单的那个，最终页面的视觉效果会干净点，但是，右键菜单是基于bootstrap的，引入了bootstrap.css以及bootstrap.js和bootstrap-contextmenu.js，所以，这个会对业务模板代码可能会造成影响。也就是说有些side effect. 另外的一种方案，就是直接添加button的，这个虽然不是那么好看，但是他需要的而外的插件资源少，最多就是一个jQuery的插件。其实，右键方式，也需要jQuery插件。
不多说了，有需要的，自己选择参考！测试的工程中引入了的资源文件等文件结构如下图所示：
用java给html文件添加必要的控制html代码片的更多相关文章
- java读取CSV文件添加到sqlserver数据库
在直接将CSV文件导入sqlserver数据库时出现了错误,原因还未找到,初步怀疑是数据中含有特殊字符.于是只能用代码导数据了. java读取CSV文件的代码如下: package experimen ...
- java向压缩文件添加文件
package org.alfresco.repo.bom.util; import java.io.File; import java.io.FileInputStream; import java ...
- JAVA对XML文件的读写(有具体的代码和解析
XML 指可扩展标记语言(EXtensible Markup Language),是独立于软件和硬件的信息传输工具,应用于 web 开发的许多方面,常用于简化数据的存储和共享. xml指令 处理指令, ...
- JAVA解析XML文件(DOM,SAX,JDOM,DOM4j附代码实现)
1.解析XML主要有四种方式 1.DOM方式解析XML(与平台无关,JAVA提供,一次性加载XML文件内容,形成树结构,不适用于大文件) 2.SAX方式解析XML(基于事件驱动,逐条解析,适用于只处理 ...
- Java中的文件和stream流的操作代码
1.Java中FileRead方法的运用代码及详解 package example2;import java.io.FileReader;import java.io.IOException;clas ...
- Java读取一个文件并打印到控制台上
package test9; import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundExcept ...
- eclipse编辑窗口不见了（打开左边的java、xml文件，中间不会显示代码)
转自:https://blog.csdn.net/u012062810/article/details/46729779?utm_source=blogxgwz4 1. windows-->re ...
- eclipse 编辑窗口不见了（打开左边的java、xml文件，中间不会显示代码)
参考:https://blog.csdn.net/u012062810/article/details/46729779
- Java 图片爬虫，java打包jar文件
目录 1. Java 图片爬虫,制作 .jar 文件 spider.java 制作 jar 文件 添加执行权限 1. Java 图片爬虫,制作 .jar 文件 spider.java spider.j ...
随机推荐
- 8个节点MySQL-cluster安装和配置，含两个管理节点
换装jdk [root@clusterdata1 software]# rpm -qa | grep javajava-1.6.0-openjdk-1.6.0.0-1.50.1.11.5.el6_3. ...
- oc小总结
oc的一些总结 下面几个问题是oc中需要掌握的内容 1.如何掌握一个方法的方法名 2.一个对象调用一个autorelease,什么时候释放 3.字典和数组,集合都有什么特点 4.如何定义一个类 5.类 ...
- poj 1260 dp
Description In Pearlania everybody is fond of pearls. One company, called The Royal Pearl, produces ...
- win10新增快捷键
按此键 出现位置 重要程度 联想记忆 替代 用途 +A 打开“操作中心” 右侧, ★★★★★ Action 控制面板 +S ...
- Gridview中DataKeyNames 设置多个主键 取值
1.设置DataKeyNames a.F4 在属性面板中设置 多个值以逗号隔开 例如id,mane,sex b.通过后台代码 this.gridview.DataSource = Bind() ...
- windows下apache及mysql定时自动重启设置
有时候觉得,服务器运行时间过长,造成服务器内存等压力过大.因此,不用重新启动服务器的情况下,完成apache和mysql的内存释放,是非常有益处的(把重启时间设置在访问量最低的).首先,apache的 ...
- c++内置函数---7
原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 内置函数 调用函数时需要一定的时间和空间的开销.一般,函数调用包括5部分: 1.程序先执行函 数调用之前 ...
- POJ-3162 Walking Race (求树上两点之间最大距离)
题目大意:给一棵树,对于所有的点,找出距它最远点的距离,然后将这些距离排成一列,找出最长的一个区间满足:其中的最大值减去最小值不大于m. 题目分析:两次dfs找出距每个节点的最远距离,然后可以通过维护 ...
- 越狱Season 1-Episode 13: End of the Tunnel
Season 1, Episode 13: End of the Tunnel -Fernando: The name is John Abruzzi. 名字是John Abruzzi A b r u ...
- activity状态的保存和保持(onRetainNonConfigurationInstance和getLastNonConfigurationInstanc
本文转载于:http://chengbs.iteye.com/blog/1156167 比较onsaveinstancestate() 与 onretainnonconfigurationinstan ...