作者:汪娇娇
时间:2018年1月15日
时间过得好快,一下子就2018年了,想起好久没写博客,不觉有些浪费了时光,今天便来补一篇。
JSON是个伟大的东西,各处都用得到,既方便也纠结。用的溜的人那就没啥说的了,但也有用的不溜的或者想偷懒的人,那JSON也算是一个小小的槛吧。怎么说呢,就比如说有的人到现在连JSON的正确格式都写不对,也有人写对了但并没有自信自己是否写对,那这时候就需要一个校验工具来检验JSON格式的正确性。既然有了校验,那格式化工具怎么能少,再随着需求的增加,我要是能随时随地能编辑JSON就好了。正好,一切都是向着自动化的方向发展,JSON的自动化也不例外,层出不穷的JSON工具也随之出来,大抵功能也就我说的那几样,JSON本身就不是复杂的东西,用来解析、校验和编辑它的东西自然也是越简洁越好。
正好最近自己公司也有这需求,于是自己就研究了一番,当然自己写会比较浪费时间,于是就在网上寻寻觅觅,终于发现了一款还不错的JSON编辑器组件 —— JSON Editor,然后自己倒持倒持,自个儿看着还挺舒服,用着也还行,就决定和大家分享一下,让大家也学会自己制作一款属于自己的JSON编辑器。如果会的话就略过,哈哈哈。
先给大家截一张我做的JSON编辑器的图吧。
JSON Editor是一个基于Web的工具。用于查看,编辑和格式化JSON。有多种modes,比如:a tree editor, a code editor, and a plain text editor。
JSON Editor可以用作我们web应用的一个组件。类库可以当做CommonJS模块、AMD模块或者常规JS文件加载。
支持的浏览器: Chrome, Firefox, Safari, Opera, Internet Explorer 9+.
npm install jsoneditor
可以npm安装,也可以直接引用cdn,或者下载下来再引用。
// 为了在我们的web应用中实现JSONEditor,我们需要载入css和js文件
<link href="https://cdn.bootcss.com/jsoneditor/5.13.1/jsoneditor.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jsoneditor/5.13.1/jsoneditor.min.js"></script>
// 获取更多详细的错误信息
<script src="https://cdn.bootcss.com/ace/1.2.9/ace.js"></script>
//上面提到支持多种modes,而其中的code mode比较特别,需要依赖于Ace editor, JSON Editor comes with a custom built version of Ace containing the ace modules ace.js, ext-searchbox.js, mode-json.js, theme-textmate.js, and a custom theme theme-jsoneditor.js。除了载入ace.js之外,我们还需要在js代码中设置mode,就像下面给出的实例中所示。
<script src="https://cdn.bootcss.com/jsonlint/1.6.0/jsonlint.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON编辑器</title>
<link href="https://cdn.bootcss.com/jsoneditor/5.13.1/jsoneditor.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="flex">
<div style="width: 40%;">
<p class="title-text">code</p>
<div id="codeEditor" style="width: 100%; height: 600px;"></div>
<div class="code-btn-box">
<button id="compact" class="compact-btn" type="button">压缩</button>
<button id="format" class="format-btn" type="button">格式化</button>
<button id="save" class="save-btn" type="button">保存</button>
</div>
</div>
<ul class="btn-box">
<li>
<button id="jsonBtn" class="json-btn" type="button">视图化 >></button>
</li>
<li>
<button id="codeBtn" type="button"><< 代码化</button>
</li>
</ul>
<div style="width: 40%;">
<p class="title-text">JSON</p>
<div id="jsonEditor" style="width: 100%; height: 600px;"></div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jsoneditor/5.13.1/jsoneditor.min.js"></script>
<script src="https://cdn.bootcss.com/ace/1.2.9/ace.js"></script>
<script src="https://cdn.bootcss.com/jsonlint/1.6.0/jsonlint.min.js"></script>
<script src="js/index.js"></script>
</html>
body,div,ul,li,p{
margin: 0;
padding: 0;
list-style: none;
}
body{
padding-top: 20px;
}
.flex{
display: flex;
justify-content: center;
align-content: center;
}
.btn-box{
margin: 0 20px;
padding-top: 100px;
button{
padding: 10px 20px;
border: 1px solid #a4a4a4;
border-radius: 5px;
background: #eee;
}
.json-btn{
margin-bottom: 20px;
}
}
.code-btn-box{
text-align: right;
margin-top: 20px;
button{
padding: 10px 20px;
border: 1px solid #a4a4a4;
border-radius: 5px;
background: #eee;
}
.save-btn{
border: 1px #f60 solid;
background: #ffc88b;
color: #f15214;
margin-left: 20px;
}
}
var codeEditor = document.getElementById("codeEditor");
var jsonEditor = document.getElementById("jsonEditor");
var jsonBtn = document.getElementById("jsonBtn");
var codeBtn = document.getElementById("codeBtn");
var compact = document.getElementById("compact");
var format = document.getElementById("format");
var save = document.getElementById("save");
//初始化编辑器模式
var codeOptions = {
mode: 'code',
modes: ['code'],
onError: function(err) {
alert(err.toString());
}
};
var jsonOptions = {
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view'],
onError: function(err) {
alert(err.toString());
}
};
//初始化编辑器内容
var codeEditor = new JSONEditor(codeEditor, codeOptions, {"a":1});
var jsonEditor = new JSONEditor(jsonEditor, jsonOptions,{"a":1});
//视图化
jsonBtn.onclick = function(){
try{
var codeContent = codeEditor.get();
if(codeContent == ""){
alert("请输入JSON数据后再转换!");
}else{
jsonEditor.set(codeContent);
}
}catch(e){
alert("JSON数据有误!");
}
}
//代码化
codeBtn.onclick = function(){
try{
var jsonContent = jsonEditor.get();
codeEditor.set(jsonContent);
}catch(e){
alert("JSON数据有误!");
}
}
//压缩
compact.onclick = function(){
try{
var codeContent = codeEditor.getText();
if(codeContent == ""){
alert("请输入JSON数据后再转换!");
}else{
codeContent = JSON.stringify(eval('(' + codeContent + ')'))
codeEditor.setText(codeContent);
}
}catch(e){
alert("JSON数据有误!");
}
}
//格式化
format.onclick = function(){
try{
var codeContent = codeEditor.getText();
if(codeContent == ""){
alert("请输入JSON数据后再转换!");
}else{
codeContent = JSON.stringify(eval('(' + codeContent + ')'), null, 2);
codeEditor.setText(codeContent);
}
}catch(e){
alert("JSON数据有误!");
}
}
//保存
save.onclick = function(){
try{
var codeContent = codeEditor.getText();
if(codeContent == ""){
alert("请输入JSON数据后再转换!");
}else{
alert(codeContent);
}
}catch(e){
alert("JSON数据有误!");
}
}
JSONEditor(container [, options] [, json])
从一个JSON对象创建一个格式化字符串:
var formattedString = JSON.stringify(json, null, 2);
从一个JSON对象创建一个压缩字符串:
var compactString = JSON.stringify(json);
从一个字符串创建一个JSON对象:
var json = JSON.parse(string);
JSON.stringify(value [, replacer] [, space])
value:必选。 JavaScript 值,通常对象或数组,将转换。
replacer:可选。 转换结果的函数或数组。
如果 replacer 函数,调用 JSON.stringify 函数,传入键值和每个成员。 返回值用于代替原始值。 如果函数返回 undefined,成员被排除。 根对象的关键是空字符串:””
如果 replacer 是数组,因此,只有用键值的成员数组中将转换。 成员变换的顺序与键顺序的数组中。 当 value 参数也是 replacer 数组时,数组被忽略。
space:可选。 添加缩进、空白和换行符来返回值 JSON 文本更便于阅读。
如果省略 space,返回值文本生成,没有任何额外的空白。
如果 space 是数字,则返回值具有空白的文本缩进指定数目在每个级别的。 如果 space 大于 10 时,文本缩进 10 个空白。
如果 space 为非空字符串,如“\t”,返回值文本缩进与字符串的字符在每个级别。
如果 space 为大于 10 个字符的字符串,使用前 10 个字符。
实例:
var continents = new Array();
continents[0] = "Europe";
continents[1] = "Asia";
continents[2] = "Australia";
continents[3] = "Antarctica";
continents[4] = "North America";
continents[5] = "South America";
continents[6] = "Africa";
var jsonText = JSON.stringify(continents, replaceToUpper);
function replaceToUpper(key, value) {
return value.toString().toUpperCase();
}
//Output:
// "EUROPE,ASIA,AUSTRALIA,ANTARCTICA,NORTH AMERICA,SOUTH AMERICA,AFRICA"
和:
var contact = new Object();
contact.firstname = "Jesper";
contact.surname = "Aaberg";
contact.phone = ["555-0100", "555-0120"];
var memberfilter = new Array();
memberfilter[0] = "surname";
memberfilter[1] = "phone";
var jsonText = JSON.stringify(contact, memberfilter, "\t");
document.write(jsonText);
// Output:
// { "surname": "Aaberg", "phone": [ "555-0100", "555-0120" ] }
根据我的使用,JsonEditor提供了监听内容改变的接口,需要在options中定义。
var container = $("#editor")[0];
var options = {
mode: 'code',
error: function (err) {
alert(err.toString());
},
change: function() {
......
}
};
var editor = new JSONEditor(container, options);
如果在change中需要获取editor中内容,会在页面初始化的时候报错:editor还没有声明什么的。如果一定要获取editor内容,我们可以延迟绑定,代码如下:
var container = $("#editor")[0];
var options = {
mode: 'code',
error: function (err) {
alert(err.toString());
},
change: function() {
}
};
var editor = new JSONEditor(container, options);
editor.options.change = function() {
....
}
注意一定要在options中声明change事件,否则不能正常绑定(具体对不对大家可以自行尝试,这里仅提供一个参考)。