工作中经常要查看一些无格式化的json数据, 下载了几个桌面的json应用, 都不是很理想. 以前常用的都是一些在线的json viewer. 比如
这个. 不过有时候受到网络的限制, 在github上找到一个不错的
jsoneditor组件, 改造一下, 自用更方便
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Switch mode</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- json editor -->
<link rel="stylesheet" type="text/css" href="../jsoneditor.css">
<script type="text/javascript" src="../jsoneditor.js"></script>
<!-- ace editor -->
<script type="text/javascript" src="../asset/ace/ace.js"></script>
<!-- json lint -->
<script type="text/javascript" src="../asset/jsonlint/jsonlint.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
}
code {
background-color: #f5f5f5;
}
#container1 {
width: 500px;
height: 800px;
}
#container2 {
width: 900px;
height: 800px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td><div id="container1"></div></td>
<td><div id="container2"></div></td>
</tr>
</tbody>
</table>
<script type="text/javascript" >
var container1 = document.getElementById('container1');
var options1 = {
mode: 'text',
error: function (err) {
alert(err.toString());
},
change: function(){
if (editor1 != null){
editor2.setText(editor1.getText());
editor2.expandAll();
}
}
};
var editor1 = new JSONEditor(container1, options1, null);
var container2 = document.getElementById('container2');
var options2 = {
mode:"view",
error: function(err){
alert(err.toString());
}
};
var editor2 = new JSONEditor(container2, options2, null);
editor1.setText("");
editor1.textarea.focus();
</script>
</body>
</html>
分享到:
相关推荐
4. **基于JsonEditor组件**:JsonViewer的实现依赖于JsonEditor组件,这是一个强大的JavaScript库,它提供了丰富的API和配置选项,允许用户自定义视图样式、编辑功能等,以满足不同的需求。 5. **交互性**:Json...
2. **实时验证**:JsonSchema是一个JSON格式的规范,用于定义JSON数据的结构和约束。JsonEditor可以结合JsonSchema进行实时验证,确保用户输入的数据符合预设的规则,避免了无效或错误的数据。 3. **可定制性**:...
JSONEditor9.1.4是该工具的一个特定版本,可能包含了性能优化、新功能或bug修复。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在Web开发中,...
JSONEditor是一款强大的在线JSON编辑器,它为用户提供了一个直观、易用的界面来查看、编辑和格式化JSON数据。在1.7.0版本中,它包含了一个中文提示版,使得中文用户在使用过程中能够更好地理解和操作。JSONEditor的...
JSONEditor提供了一个清晰的树形视图,使得复杂的数据结构一目了然。用户可以通过点击加减号展开或折叠键值对,快速定位到所需信息。此外,它还支持文本编辑模式,可以像编辑普通文本一样编辑JSON数据,便于进行...
`jsonEditor` 是一个强大的JSON数据编辑器,它为用户提供了可视化的界面来创建、查看和编辑JSON数据。这个编辑器支持多种功能,如颜色编码、错误检测、树形视图和代码视图切换,使得处理JSON数据变得更加直观和便捷...
总的来说,JSONEditor离线版提供了一个便捷的本地环境来管理和编辑JSON数据,对于开发人员和数据分析师来说,是一个非常实用的工具。其简洁的界面和强大的功能使得JSON数据的处理变得更加简单和快捷。
通过理解这些关键点,你可以充分利用JSONEditor模板,创建一个高效、用户友好的后台管理系统,用于展示和编辑JSON数据。在实际开发中,根据项目需求进行适当的定制和优化,可以进一步提升其功能和用户体验。
JSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑。它完整支持JSON Schema 的版本3和版本4,并且它集成了一些流行的CSS 框架,例如bootstrap, ...jsoneditor.* filereader.js FileSaver.js
总的来说,JSONEditor是一个非常实用的工具,无论你是初学者还是经验丰富的开发者,都能帮助你更好地管理和编辑JSON数据。有了本地版,你可以在离线环境下工作,避免网络延迟,提高效率。只需简单几步,你就能拥有一...
`JSON Editor Online` 是一个在线工具,提供了一个友好的界面来处理JSON数据。离线版的`JSON Editor`允许用户在没有网络连接的情况下也能进行JSON数据的编辑工作,这对于开发和调试过程非常有用。 在该压缩包"JSON ...
为了方便用户,JSONEditor还提供了一个在线版本,无需下载安装即可直接在浏览器中使用,这对于需要临时处理JSON数据或者在不同设备间切换工作的用户来说,无疑增加了极大的便利性。 总结来说,JSONEditor是一个强大...
在“jsonEditor离线版”中,我们可以将这个功能带到本地,无需互联网连接即可进行JSON数据的管理工作。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,广泛应用于Web服务和API接口,因为它易于人...
cxTL是一个Delphi组件库,可能为Json Editor提供了丰富的控件和界面元素支持。而SuperObject是一个流行的、高性能的JSON解析和生成库,使得Json Editor能够高效地处理JSON数据,包括读取、写入、验证和转换JSON格式...
这款应用提供了一个直观的界面,使得非编程背景的人员也能理解JSON数据的结构。 使用JSON Viewer,你可以将包含JSON数据的字符串简单地复制并粘贴到文本区域。工具会自动识别并解析JSON文本,然后在新的标签页中以...
JSON编辑器是一个基于web的工具,用于查看、编辑、格式化和验证JSON。它有各种模式,如树编辑器、代码编辑器和纯文本编辑器。编辑器可以用作您自己的web应用程序中的组件。它可以作为CommonJS模块、AMD模块或常规...
在MAC操作系统上,对于JSON数据的处理,一个直观且高效的工具——"MAC下Json编辑器Json Editor"显得尤为重要。这款编辑器提供了一个图形化的用户界面,使得查看和编辑JSON对象变得轻松快捷。 在JSON Editor中,你...
- **学习理解**:对于初学者来说,通过可视化的方式了解JSON结构,JsonViewer是一个非常有用的辅助工具。 总之,JsonViewer作为一款实用的JSON查看和排版工具,它简化了JSON数据的解析过程,提高了工作效率,是...
在标签中,“json”和“jsoneditor”进一步明确了这个软件的核心功能,即专注于JSON数据的处理和编辑。用户可以通过这款编辑器进行数据格式验证,确保符合JSON规范,避免因格式错误导致的问题。 根据提供的压缩包子...
JSON Editor Online是一个简单的,灵活的,可视化的JSON编辑器。在一个简洁的界面,它使您能够快速创建,查看、编辑和格式化你的JSON文件。 JSON Editor Online 2.3.4 更新日志:2013-11-19 - 对IE8的支持,清理...