原 荐 自己写JSON编辑器

作者:汪娇娇

时间: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>

三、使用

  • index.html
<!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>
  • index.css
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;
    }
}
  • index.js
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数据有误!");
	}
}

四、API

1、JSONEditor构造函数

JSONEditor(container [, options] [, json])

2、方法 

  1. JSONEditor.collapseAll() Collapse all fields. Only applicable for mode ‘tree’, ‘view’, and ‘form’.
  2. JSONEditor.expandAll() Expand all fields. Only applicable for mode ‘tree’, ‘view’, and ‘form’.
  3. JSONEditor.set(json) Set JSON data.
  4. JSONEditor.setMode(mode) Switch mode. Mode code requires the Ace editor. 可选参数:tree, view, form, code, text.
  5. JSONEditor.setName(name) Set a field name for the root node.
  6. JSONEditor.setText(jsonString) Set text data in the formatter.
  7. JSONEditor.get() Get JSON data.
  8. JSONEditor.getName() Retrieve the current field name of the root node.
  9. JSONEditor.getText() Get JSON data as string.

从一个JSON对象创建一个格式化字符串:

var formattedString = JSON.stringify(json, null, 2);

从一个JSON对象创建一个压缩字符串:

var compactString = JSON.stringify(json);

从一个字符串创建一个JSON对象:

var json = JSON.parse(string);

3、JSON.stringify 函数

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事件,否则不能正常绑定(具体对不对大家可以自行尝试,这里仅提供一个参考)。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Golang视角下的设计模式

这篇文章想聊聊Golang语言下的设计模式问题,我觉得这个话题还是比较有意思的。Golang没有像java那样对设计模式疯狂的迷恋,而是摆出了一份“看庭前花开花...

39290
来自专栏阮一峰的网络日志

JavaScript Source Map 详解

上周,jQuery 1.9发布。 ? 这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map。 访问 http://ajax.go...

34450
来自专栏Vamei实验室

快速学习Bash

作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载。

13830
来自专栏LEo的网络日志

go语言性能建议

36780
来自专栏开源优测

[接口测试 - 基础篇] 11 掌握下python解析YAML格式也是需要的

什么是YAML YAML参考了其他多种语言,包括:XML、C语言、Python、Perl以及电子邮件格式RFC2822。 Clark Evans在2001年5月...

36170
来自专栏北京马哥教育

最详细的 linux grep命令教程

grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印...

20700
来自专栏大内老A

ASP.NET MVC的Model元数据与Model模板:预定义模板

通过ModelMetadata表示的Model元数据的一个主要的作用在于为定义在HtmlHelper和HtmlHelper<TModel>中的模板方法(这些模板...

262100
来自专栏逸鹏说道

C# 温故而知新:Stream篇(六)

BufferedStream 目录: 简单介绍一下BufferedStream 如何理解缓冲区? BufferedStream的优势 从BufferedStre...

34350
来自专栏技术小讲堂

Angular开发者手册重点翻译之指令(一)文本和属性绑定ngAttr属性绑定

创建自定义的指令 这个文章将解释什么需要在自己的angularjs应用中创建自己的指令,以及如何实现它。 什么是指令 在高的层面上讲,指令是DOM元素中的标记...

39260
来自专栏Vamei实验室

快速学习Bash

作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁转载。

8920

扫码关注云+社区

领取腾讯云代金券