工作中经常要查看一些无格式化的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>
分享到：
相关推荐
jsonEditor Editor json jsonEditor Editor json jsonEditor Editor json jsonEditor Editor json
JsonEditor编辑器，适合前端使用，详细api请查看json-editor的api文档
功能强大的 json editor 源代码，使用 javascript 编写
JSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑。它完整支持JSON Schema 的版本3和版本4，并且它集成了一些流行的CSS 框架，例如bootstrap, ...jsoneditor.* filereader.js FileSaver.js
参考网友疯狂的菠菜的博客，使用JsonEditor组件写的一个HTML版的JsonViewer，可以查看Json树形结构，增添了自适应显示器大小，以及xml格式的显示功能。
jsonEditor Eclipse 插件
JSON Editor 格式化,需要使用Chrome浏览器
JSON Editor Online是一个简单的，灵活的，可视化的JSON编辑器。在一个简洁的界面，它使您能够快速创建，查看、编辑和格式化你的JSON文件。 JSON Editor Online 2.3.4 更新日志：2013-11-19 - 对IE8的支持，清理...
一个非常实用的JSON查看工具，把json字符串粘到文本区中，在另一个tab中就可以看到这个json的结构。 这个工具还可以提示json解析出错的位置
终于让我找到一个不错的Json阅读器，支持粘贴数据并进行可视化展示以及自动格式化数据的功能。JSON Viewer——Json格式化查看工具,可以对JSON字符串进行格式化显示，可以快速将Json字符串排列规则的树结构，以后于...
jsonEditor离线版.可整理JSON格式生成对象树。
一个基于Web的工具，用于查看，编辑，格式化，转换和验证JSON 该库是用Svelte编写的，但是可以在任何框架（React，Angular，纯JavaScript）中使用。 安装 npm install 使用 有关一些完整的示例，请参见部分。 Card...
angular-jsoneditor 角度包装 要求 仅AngularJS，其余捆绑 用法 NPM： npm install --save angular-jsoneditor 不要忘记在应用程序中包含文件： < script src =" /node_modules/angular-jsoneditor/dist/...
样式类似：http://www.bejson.com/jsoneditoronline/
JsonViewer 一款很好的JSON排版软件
JSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑。它完整支持JSON Schema 的版本3和版本4，并且它集成了一些流行的CSS 框架，例如bootstrap, foundation, and jQueryUI等。 JSON Editor ...
JSONEditor功能组件 JSON数据可视化/JSONEditor，json可视化编辑能力的实现（以表单形式编辑json数据） 使用场景：提供可视化界面编辑json数据内容 技术栈：React/Mobx/Ant Design 特点： 弹性布局，提供大屏和小屏...
前端项目-ng-jsoneditor,Angular version of the insanely cool jsoneditor
jsoneditoronline的离线版，用于编辑json格式数据 ，格式化json数据，解压点击里面的html直接使用，页面左框字符串格式，右边树形结构
JsonViewer 查看工具 JsonViewer 查看工具 JsonViewer 查看工具 JsonViewer 查看工具