-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (123 loc) · 4.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON编辑器</title>
<style type="text/css">
body {
width: 960px;
margin: 0 auto;
}
p {
margin: 0 auto;
}
</style>
<script type="text/javascript" src="lib/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="lib/moment.min.js"></script>
<script src="json_editor.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
</style>
</head>
<body>
<table border="0" style="width: 100%;background: #EEEEEE;height: 600px;">
<tr>
<td style="width: 30%;padding: 10px 10px 10px 10px;" valign="top">
<p>原始数据</p>
<textarea id="json_string" rows="20" style="width: 100%;">{"name":"JSON editor","basic key":"Easy to edit json data","numberSample":"od0012","enumSample":"FEMALE","emailSample":"ff13dfly@163.com","mobileSample":"13301557496","fileSample":"http://localhost/Jeditor/README.md","timeSample":"2014-09-08T08:02:17-05:00","boolSample":true,"normal object":{"key a":"row a","key b":"row b","key c":{"suba":"Hello world","sub b":"Good day"},"subArray":["a","b","c","d"],"timeSample":"2015-03-08T17:02:17-05:00"},"basic Array":["element a","element b","element c"],"complexArray":[{"eleA":["aa","bb","cc"],"eleB":"good news"}],"images":""}</textarea>
<p>编辑结果</p>
<textarea id="json_result" rows="20" style="width: 100%;"></textarea>
</td>
<td style="width: 70%;padding: 10px 10px 10px 10px;background: #FFFFFF;">
<div id="json_con"></div>
</td>
</tr>
</table>
<script type="text/javascript">
loadJSON();
$("#json_string").on('blur', loadJSON);
function loadJSON() {
const cfg = {
container: '#json_con',
onChange: function(res) {
$("#json_result").val(JSON.stringify(res));
},
onUpload: function(res, ck) {
const result = "http://localhost/Jeditor/LICENSE";
ck && ck(result);
},
onSelect: function(res) {
console.log(res);
//do some thing. even reload a new JSON
},
setting: {
},
hide: [
['normal object'],
],
lock: [
//['enumSample'],
['basic Array', '0'],
],
format: {
'emailSample': {
'type': 'email',
'default': {
'rule': /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/,
},
},
'mobileSample': {
'type': 'mobile',
'default': {},
},
'fileSample': {
'type': 'file',
'default': {
placeholder: '请选择上传文件',
maxSize: 1024 * 1024,
toBase64: true,
},
},
'enumSample': {
'type': 'enum',
'data': [{
title: '女性',
value: 'FEMALE'
}, {
title: '男性',
value: 'MALE'
}, ],
},
'images': {
'type': 'image',
'default': {
placeholder: '请选择图像文件',
maxSize: 1024 * 1024,
toBase64: true,
},
},
'timeSample': {
'type': 'time',
'default': {
timeZone: true,
format: "YYYY-MM-DDTHH:mm:ssZ",
},
},
'boolSample': {
'type': 'bool',
}
},
lang: {
'name': '名称',
'enumSample': '枚举',
'basic key': '基本键值',
},
note: {
'name': '名称',
'enumSample': '枚举',
},
}
Jeditor.init(JSON.parse($("#json_string").val()), cfg);
}
</script>
</body>
</html>