工作中经常要查看一些无格式化的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是一个强大...
cxTL是一个Delphi组件库，可能为Json Editor提供了丰富的控件和界面元素支持。而SuperObject是一个流行的、高性能的JSON解析和生成库，使得Json Editor能够高效地处理JSON数据，包括读取、写入、验证和转换JSON格式...
【ng-jsoneditor】是一个专为前端开发者设计的项目，它基于Angular框架实现了功能强大的JSON编辑器。这个编辑器允许用户以美观、交互的方式查看、编辑和格式化JSON数据。Angular是一个由Google维护的开源JavaScript...
这款应用提供了一个直观的界面，使得非编程背景的人员也能理解JSON数据的结构。 使用JSON Viewer，你可以将包含JSON数据的字符串简单地复制并粘贴到文本区域。工具会自动识别并解析JSON文本，然后在新的标签页中以...
在MAC操作系统上，对于JSON数据的处理，一个直观且高效的工具——"MAC下Json编辑器Json Editor"显得尤为重要。这款编辑器提供了一个图形化的用户界面，使得查看和编辑JSON对象变得轻松快捷。 在JSON Editor中，你...
JSON编辑器是一个基于web的工具，用于查看、编辑、格式化和验证JSON。它有各种模式，如树编辑器、代码编辑器和纯文本编辑器。编辑器可以用作您自己的web应用程序中的组件。它可以作为CommonJS模块、AMD模块或常规...
Notepad++ 的JSON-Viewer插件jsonviewer插件64位版本x64，用于格式化json
- **学习理解**：对于初学者来说，通过可视化的方式了解JSON结构，JsonViewer是一个非常有用的辅助工具。 总之，JsonViewer作为一款实用的JSON查看和排版工具，它简化了JSON数据的解析过程，提高了工作效率，是...
在标签中，“json”和“jsoneditor”进一步明确了这个软件的核心功能，即专注于JSON数据的处理和编辑。用户可以通过这款编辑器进行数据格式验证，确保符合JSON规范，避免因格式错误导致的问题。 根据提供的压缩包子...