json，我相信每个程序都要用到的，我在java开发的时候也是，工作中经常要查看一些无格式化的json数据, 下载了几个桌面的json应用, 都不是很理想. 以前常用的都是一些在线的json viewer. 比如这个. 不过有时候受到网络的限制, 在github上找到一个不错的jsoneditor组件, 我在一个java论坛上找到的，改造优化了一下, 自用更方便。留着有用，方便大家也可以是用这个jsoneditor组件。


Html代码


  1. <!DOCTYPE HTML>  

  2. <html>  

  3. <head>  

  4.   <title>JSONEditor | Switch mode</title>  

  5.   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  

  6.   

  7.   <!-- json editor -->  

  8.   <link rel="stylesheet" type="text/css" href="../jsoneditor.css">  

  9.   <script type="text/javascript" src="../jsoneditor.js"></script>  

  10.   

  11.   <!-- ace editor -->  

  12.   <script type="text/javascript" src="../asset/ace/ace.js"></script>  

  13.   

  14.   <!-- json lint -->  

  15.   <script type="text/javascript" src="../asset/jsonlint/jsonlint.js"></script>  

  16.   

  17.   <style type="text/css">  

  18.     body {  

  19.       font: 10.5pt arial;  

  20.       color: #4d4d4d;  

  21.       line-height: 150%;  

  22.       width: 500px;  

  23.     }  

  24.   

  25.     code {  

  26.       background-color: #f5f5f5;  

  27.     }  

  28.   

  29.     #container1 {  

  30.       width: 500px;  

  31.       height: 800px;  

  32.     }  

  33.   

  34.     #container2 {  

  35.       width: 900px;  

  36.       height: 800px;  

  37.     }  

  38.   </style>  

  39. </head>  

  40. <body>  

  41. <table>  

  42.   <tbody>  

  43.     <tr>  

  44.       <td><div id="container1"></div></td>  

  45.       <td><div id="container2"></div></td>  

  46.     </tr>  

  47.   </tbody>  

  48. </table>  

  49.   

  50. <script type="text/javascript" >  

  51.   

  52.   var container1 = document.getElementById('container1');  

  53.   var options1 = {  

  54.     mode: 'text',  

  55.     error: function (err) {  

  56.       alert(err.toString());  

  57.     },  

  58.     change: function(){  

  59.       if (editor1 != null){  

  60.         editor2.setText(editor1.getText());  

  61.         editor2.expandAll();  

  62.       }  

  63.     }  

  64.   };  

  65.   var editor1 = new JSONEditor(container1, options1, null);  

  66.   

  67.   var container2 = document.getElementById('container2');  

  68.   var options2 = {  

  69.     mode:"view",  

  70.     error: function(err){  

  71.       alert(err.toString());  

  72.     }  

  73.   };  

  74.   var editor2 = new JSONEditor(container2, options2, null);  

  75.   

  76.   editor1.setText("");  

  77.   editor1.textarea.focus();  

  78.     

  79. </script>  

  80. </body>  

  81. </html>