这个需求，我估计很多时候都不会用到，但是，我们目前在做一个CMS的系统，在创建页面的时候，需要控制页面各个板块显示的内容来源，这个不是关键，关键是页面内容配置完毕后，如何提交内容，也就是说如何和后台系统通信。这个时候，有两种做法，一种是在页面的控制区域内添加右键菜单，实现这个功能。另外一个做法，就是在页面中添加按钮区域来实现。
但是不管那种做法，控制区域的html页面上的逻辑代码片，都不可能在模板里面添加，这是不友好的，客户也是不会考虑这个的，再说了，他也没有办法考虑。所以，需要CMS系统自动最近这个控制区域的html代码片。于是，java操作html的插件就诞生了！有不少类似的插件，这里我选择比较简单的jsoup插件。下面的简单实验，用到的版本是1.9.2，就一个jar包，不需要额外的资源了。
我这里上代码，分别说明右键实现，以及直接追加button的方式实现。
先说右键实现方案，这里，右键菜单是用bootstrap-contextmenu.js插件实现的，是基于bootstrap风格的。
1 /** 2 * @author "shihuc" 3 * @date 2016年5月21日 4 */ 5 package opc; 6 7 import java.io.File; 8 import java.io.FileOutputStream; 9 import java.io.IOException; 10 import java.io.OutputStreamWriter; 11 12 import org.jsoup.Jsoup; 13 import org.jsoup.nodes.Document; 14 import org.jsoup.nodes.Element; 15 import org.jsoup.select.Elements; 16 17 /** 18 * @author "shihuc" 19 * 20 */ 21 public class Demo { 22 23 /** 24 * @param args 25 * @throws IOException 26 */ 27 public static void main(String[] args) throws IOException { 28 File input = new File("./example.html"); 29 Document doc = Jsoup.parse(input, "UTF-8"); 30 System.out.println(doc.html()); 31 Elements content = doc.getElementsByTag("body"); 32 //找到body的内容 33 String body = content.get(0).html(); 34 System.out.println(body); 35 36 //读取控制页面右键的代码片段 37 File pice = new File("./pice.html"); 38 Document pdoc = Jsoup.parse(pice, "UTF-8"); 39 Element control_area = pdoc.getElementById("tk-cms-page-context-menu-control-area"); 40 41 //将业务相关的html代码片添加到右键菜单控制区域中 42 control_area.append(body); 43 44 //将带有业务相关代码的html内容填写到原来的example.html文件的body区域 45 content.get(0).html(pdoc.html()); 46 47 FileOutputStream fos = new FileOutputStream("./output.html", false); 48 OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8"); 49 osw.write(doc.html()); 50 osw.close(); 51 } 52 53 }
这里的example.html文件的内容如下：
1 <!DOCTYPE HTML> 2 <html> 3 4 <body> 5 6 <div> 7 <h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1> 8 </div> 9 10 11 </body> 12 </html> 13 14
那个pice.html的内容如下:
1 <style type="text/css"> 2 .vCenter 3 { 4 vertical-align:middle; 5 margin:0 auto; 6 } 7 </style> 8 9 <div id="context-menu" style="position: absolute; z-index: 9999; top: 746px; left: 474px;" class=""> 10 <ul class="dropdown-menu" role="menu"> 11 <li><a tabindex="-1">Cancel</a></li> 12 <li><a tabindex="-1">Action</a></li> 13 </ul> 14 </div> 15 <div id="tk-cms-page-context-menu-control-area" data-toggle="context" style="height:100%;100%;border:1px solid #ddd;" class="vCenter"> 16 17 </div> 18 19 <script src="js/jquery-2.1.1.min.js"></script> 20 <script src="js/bootstrap.min.js"></script> 21 <script src="js/bootstrap-contextmenu.js"></script> 22 <link href="css/bootstrap.min.css" rel="stylesheet"> 23 <script type="text/javascript"> 24 $(document).ready(function(){ 25 //屏蔽掉浏览器显示的页面中的右键菜单。 26 document.oncontextmenu = function(){return false;}; 27 //启用自定义的右键菜单 28 $('#tk-cms-page-context-menu-control-area').contextmenu({ 29 target: '#context-menu', 30 onItem: function (context, e) { 31 alert($(e.target).text()); 32 } 33 }); 34 }) 35 </script>
最后生成的output.html的内容如下：
1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <style type="text/css"> 6 .vCenter 7 { 8 vertical-align:middle; 9 margin:0 auto; 10 } 11 </style> 12 <div id="context-menu" style="position: absolute; z-index: 9999; top: 746px; left: 474px;" class=""> 13 <ul class="dropdown-menu" role="menu"> 14 <li><a tabindex="-1">Cancel</a></li> 15 <li><a tabindex="-1">Action</a></li> 16 </ul> 17 </div> 18 <div id="tk-cms-page-context-menu-control-area" data-toggle="context" style="height:100%;100%;border:1px solid #ddd;" class="vCenter"> 19 <div> 20 <h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1> 21 </div> 22 </div> 23 <script src="js/jquery-2.1.1.min.js"></script> 24 <script src="js/bootstrap.min.js"></script> 25 <script src="js/bootstrap-contextmenu.js"></script> 26 <link href="css/bootstrap.min.css" rel="stylesheet"> 27 <script type="text/javascript"> 28 $(document).ready(function(){ 29 //屏蔽掉浏览器显示的页面中的右键菜单。 30 document.oncontextmenu = function(){return false;}; 31 //启用自定义的右键菜单 32 $('#tk-cms-page-context-menu-control-area').contextmenu({ 33 target: '#context-menu', 34 onItem: function (context, e) { 35 alert($(e.target).text()); 36 } 37 }); 38 }) 39 </script> 40 </body> 41 </html>
效果如下图所示，只有在灰色框区域内容点击鼠标右键有反应，框外点击鼠标右键是没有菜单出来的，那个框，限定了菜单的有效控制范围。
下面，再来看看，直接追加button在业务模板html页面后面的实现方案。直接上代码！
example.html的部分与上面一样，不再列举，下面先说java的部分：
1 /** 2 * @author "shihuc" 3 * @date 2016年5月21日 4 */ 5 package opc; 6 7 import java.io.File; 8 import java.io.FileOutputStream; 9 import java.io.IOException; 10 import java.io.OutputStreamWriter; 11 12 import org.jsoup.Jsoup; 13 import org.jsoup.nodes.Document; 14 import org.jsoup.nodes.Element; 15 import org.jsoup.select.Elements; 16 17 /** 18 * @author "shihuc" 19 * 20 */ 21 public class Demo2 { 22 23 /** 24 * @param args 25 * @throws IOException 26 */ 27 public static void main(String[] args) throws IOException { 28 File input = new File("./example.html"); 29 Document doc = Jsoup.parse(input, "UTF-8"); 30 System.out.println(doc.html()); 31 Elements content = doc.getElementsByTag("body"); 32 //找到body的内容 33 Element body = content.get(0); 34 System.out.println(body.html()); 35 36 //读取控制页面右键的代码片段 37 File pice = new File("./pice2.html"); 38 Document pdoc = Jsoup.parse(pice, "UTF-8"); 39 40 //将控制页面相关逻辑代码追加到业务页面example.html的最后面。 41 body.append(pdoc.html()); 42 43 FileOutputStream fos = new FileOutputStream("./output2.html", false); 44 OutputStreamWriter osw = new OutputStreamWriter(fos, "UTF-8"); 45 osw.write(doc.html()); 46 osw.close(); 47 } 48 49 }
再来列举pice2.html的代码部分：
1 <style type="text/css"> 2 .vCenter 3 { 4 vertical-align:middle; 5 margin:0 auto; 6 } 7 </style> 8 9 <div id="tk-cms-op-btn" style="border:1px solid #ddd; padding: 10px 10px" class="vCenter"> 10 <button type="button" onclick="cancel();">Cancel</button> 11 <button type="button" onclick="action();">Action</button> 12 </div> 13 14 <script src="js/jquery-2.1.1.min.js"></script> 15 <script type="text/javascript"> 16 function cancel(){ 17 alert("cancel"); 18 } 19 function action(){ 20 alert("action"); 21 } 22 $(document).ready(function(){ 23 24 }); 25 </script>
最后看看输出部分output2.html的代码片：
1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <div> 6 <h1 style="text-align: center; font-size: 40px; color: #abcdef">This is a test page</h1> 7 </div> 8 <style type="text/css"> 9 .vCenter 10 { 11 vertical-align:middle; 12 margin:0 auto; 13 } 14 </style> 15 <div id="tk-cms-op-btn" style="border:1px solid #ddd; padding: 10px 10px" class="vCenter"> 16 <button type="button" onclick="cancel();">Cancel</button> 17 <button type="button" onclick="action();">Action</button> 18 </div> 19 <script src="js/jquery-2.1.1.min.js"></script> 20 <script type="text/javascript"> 21 function cancel(){ 22 alert("cancel"); 23 } 24 function action(){ 25 alert("action"); 26 } 27 $(document).ready(function(){ 28 29 }); 30 </script> 31 </body> 32 </html>
看看example.html模板文件在追加了控制代码片后的效果：
到此，两种通过jsoup操作html添加页面控制单元的实现方案都列举出来，读者是不是有疑问了，这两者有啥区别，或者说到底那种要好点呢？
个人觉得，第一种右键菜单的那个，最终页面的视觉效果会干净点，但是，右键菜单是基于bootstrap的，引入了bootstrap.css以及bootstrap.js和bootstrap-contextmenu.js，所以，这个会对业务模板代码可能会造成影响。也就是说有些side effect. 另外的一种方案，就是直接添加button的，这个虽然不是那么好看，但是他需要的而外的插件资源少，最多就是一个jQuery的插件。其实，右键方式，也需要jQuery插件。
不多说了，有需要的，自己选择参考！测试的工程中引入了的资源文件等文件结构如下图所示：
