JSON editor implementation code

You can enter or paste some JSON data to verify whether the data is correct.
Press the Tab key to automatically indent and format the full text.

JSON Editor
Core codeCopy codeThe Code is as follows: <script type = "text/javascript"> <! --
/*
Main Object
*/
JE = {
Data: {},/* Associate data */
Code: false,/* formatted code */
OldCode: [],/* historical Code */
EditUI: null,/* associated editing box */
MsgUI: null,/* information display window */
TreeUI: null,/* tree window */
Name: 'Je ',/* Instance name */
Root: '<B> JSON </B>',/* root node title */
Checkbox: 0,/* whether to add a dialog box */
Hot: null,/* selected node */
Indent: '',/* indent '\ t' or 4 ''*/
FirstUp: true,/* auto refresh for the first time */
Onclick: Array,/* tree click notification */
CountInfo: '',/* Statistics */
Formating: false,/* formatting (rebuilding tree forbidden )*/
Ico: {/* tree icon */
// Folder structure line
R0: 'img? Uuid = 20166b3094daba4bc6e18817b8301b093a ',
R0c: 'img? Uuid = 208018827ed877e31810e838d33e4ac2b0 ',
R1: 'img? Uuid = 2094c793496278bde84be80bb6cb2117f5 ',
R1c: 'img? Uuid = 205f2329c537dcfd32b5f33bf642f76fa6 ',
R2: 'img? Uuid = 20af62be7c197cae64d3e533f7aaf28c25 ',
R2c: 'img? Uuid = 20a00598da-3e5bc8544cecd8b7f82fcdb ',
// Prefix Image
Nl: 'img? Uuid = 20f508bdc9bb8d98f4529e0fa2475b91bb ',
Vl: 'img? Uuid = 20d5de63f4e6927bbb23c377bd1_3d26f ',
// File structure line
F1: 'img? Uuid = 202ccc639afd44130a3946e9837672479c ',
F2: 'img? Uuid = 20900ceb0053a2f7bd07a22337c4e4c72c ',
Root: 'img? Uuid = 2069cf3fd1e53a2bb365f771eac65b50a2 ',
// Folder
Arr: 'img? Uuid = 20b7d6e86f4f288ea097c10b1c0d7f4b6b ',
Arrc: 'img? Uuid = 20b7d6e86f4f288ea097c10b1c0d7f4b6b ',
Obj: 'img? Uuid = 20c34d1d5d5a4639061e08165c61a97e63 ',
Objc: 'img? Uuid = 20c34d1d5d5a4639061e08165c61a97e63 ',
// File
Arr2: 'img? Uuid = 20327500502b71ed0278a0cc1bf8f8bb41 ',
Obj2: 'img? Uuid = 203104cafeedac1fb7628bc886b9b7fb47'
},
ToTree: function () {/* convert JSON to tree HTML and format the Code */
Var draw = [], This = this, ico = this. ico;
JE. firstUp = false;/* Complete Automatic Construction for the first time */
Var plugin y = function (prefix/* prefix HTML */, lastParent/* whether the parent node is the end node (confirm that the icon is blank | structure line) */, name/* node name */, value/* node value */, formObj/* whether the parent is an object (determine the child icon) */) {/* construct the child node */
Var rl = prefix = ''? Ico. r0: lastParent? Ico. r1: ico. r2;/* configure the root node icon */
If (value & value. constructor = Array) {/* process Array nodes */
Draw. push ('<dl> <dt>', This. draw (prefix, rl, ico. arr, name, ''), '</dt> <dd>');/* draw a folder */
For (var I = 0; I <value. length; I ++)
Policy (prefix + This. img (lastParent? Ico. nl: ico. vl), I = value. length-1, I, value [I]);
Draw. push ('</dd> </dl> ');
} Else if (value & typeof value = 'object') {/* process object nodes */
Draw. push ('<dl> <dt>', This. draw (prefix, rl, ico. obj, name, ''), '</dt> <dd>');/* draw a folder */
Var len = 0, I = 0;
For (var key in value) len ++;/* Get the total number of object members */
For (var key in value) Every y (prefix + This. img (lastParent? Ico. nl: ico. vl), ++ I = len, key, value [key], true );
Draw. push ('</dd> </dl> ');
} Else {/* processing leaf nodes (drawing files )*/
Draw. push ('<dl> <dt>', This. draw (prefix, lastParent? Ico. f1: ico. f2, formObj? Ico. obj2: ico. arr2, name, value), '</dt> </dl> ');
};
};/* Not [] or {} do not draw */
If (typeof this. data = 'object') {Policy ('', true, this. root, this. data );};
If (this. treeUI) this. treeUI. innerHTML = draw. join ('');/* display in the tree window */
This. msg ('tree view constructed successfully! ');
},
Draw: function (prevfix, line, ico, name, value) {/* subitem HTML constructor */
Var cmd = false, J = this. ico, imgName = false;
Switch (line) {// transfer the switch icon
Case J. r0: imgName = 'r0 '; break;
Case J. r1: imgName = 'r1'; break;
Case J. r2: imgName = 'r2 ';
}
If (imgName) cmd = 'onclick = "'+ this. name + '. show (this, \ ''+ imgName + '\')" ';/* Add the folding command */
Var type = typeof name = 'string '? '(Object member)': '(array index )';
Return prevfix + this. img (line, cmd)
+ (This. checkbox? '<Input type = "checkbox" onclick = "' + this. name + '. select (this)"/> ':'')
+ This. img (ico) + '<a href = "javascript: void (0)" href = "javascript: void (0)" onclick = "' + this. name + '. click (this );"'
+ 'Key = "'+ name +'" val = "'+ value +'">'
+ Name + type + (value = ''? '': '=') + Value + '</a>'
},
Img: function (src, attr) {/* img HTML construction */
Return ' ';
},
Click: function (item) {/* subitem click unified callback */
If (this. hot) this. hot. className = '';
This. hot = item;
This. hot. className = 'hot ';/* switch the selected item */
This. onclick (item );
},
Format: function (txt, compress/* compression mode */) {/* format the JSON source code (convert the object to JSON text )*/
If (/^ \ s * $/. test (txt) return this. msg ('data is empty and cannot be formatted! ');
Try {var data = eval ('+ txt + ')');}
Catch (e ){
JE. editUI. style. color = 'red ';
Return this. msg ('data source syntax error, formatting failed! Error message: '+ e. description, 'err ');
};
JE. editUI. style. color = '#000 ';
Var draw = [], last = false, This = this, line = compress? '': '\ N', nodeCount = 0, maxDepth = 0;
Var every Y = function (name, value, isLast, indent/* indent */, formObj ){
NodeCount ++;/* node count */
For (var I = 0, tab = ''; I <indent; I ++) tab + = This. indent;/* indent HTML */
Tab = compress? '': Tab;/* unindent in compression mode */
MaxDepth = ++ indent;/* increase indent and record */
If (value & value. constructor = Array) {/* process the Array */
Draw. push (tab + (formObj? ('"' + Name + '":'): '') + '[' + line);/* indent '[' and then wrap */
For (var I = 0; I <value. length; I ++)
Y (I, value [I], I = value. length-1, indent, false );
Draw. push (tab + ']' + (isLast? Line :( ',' + line);/* indent ']' line feed. If it is not a tail element, add a comma */
} Else if (value & typeof value = 'object') {/* process object */
Draw. push (tab + (formObj? ('"' + Name + '":'): '') + '{' + line);/* indent '{' and then wrap */
Var len = 0, I = 0;
For (var key in value) len ++;
For (var key in value) notify (key, value [key], ++ I = len, indent, true );
Draw. push (tab + '}' + (isLast? Line :( ',' + line);/* indent '}' line feed. If it is not a tail element, add a comma */
} Else {
If (typeof value = 'string') value = '"' + value + '"';
Draw. push (tab + (formObj? ('"' + Name + '":'): '') + value + (isLast? '': ',') + Line );
};
};
Var isLast = true, indent = 0;
Y ('', data, isLast, indent, false );
This. countInfo = 'total processed nodes <B> '+ nodeCount +' </B>. The maximum depth is <B> '+ maxDepth +' </B> ';
Return draw. join ('');
},
Msg: function (text, type) {/* edit status or Error Notification */
If (! This. msgUI) return alert (text );
With (new Date) var now = ([getHours (), getMinutes (), getSeconds ()]. join (':')). replace (/\ B \ d \ B/g, '0 $ &');
This. msgUI. innerHTML = '<div> [' + now + ']' + text. replace (/\ n/g, '<br/>') + '</div> ';
This. msgUI. className = type;
},
Show: function (ico, id) {/* explicit/hidden Tree node */
Var subView = ico. parentNode. parentNode. childNodes [1]. style, J = this. ico;
If (subView. display = 'None '){
SubView. display = '';
Ico. src = J [id];
} Else {
SubView. display = 'none ';
Ico. src = J [id + 'C'];
};
},
Select: function (sender ){
Var sub = sender. parentNode. parentNode. getElementsByTagName ("INPUT ");
For (var I = 0; I <sub. length; I ++) {sub [I]. checked = sender. checked ;}
}
};
JE. add = function (){
This. msg ('adding function... * _ ^ ');
}
JE. editItem = function (){
This. msg ('adding function... * _ ^ ');
}
JE. begin = function () {/* set the UI control association response */
Var $ = function (id) {return document. getElementById (id )};
/* Associate the UI */
JE. editUI = $ ("json_eidit ");
JE. msgUI = $ ("json_editInfo ");
JE. treeUI = $ ("tree ");
Var updateUI = $ ("update ");
Var auto = $ ("autoUpdate ");
Var fontSize = $ ("fontSize ");
/* Click the tree subitem */
JE. onclick = function (item ){
Var key = 'key name: <input value = "'+ item. getAttribute ('key') +'"/> ',
Val = 'key value: '+ (item. getAttribute ('val') = ''? 'Member list': '<input value = "' + item. getAttribute ('val') + '"/> '),
Add = '<button onclick = "' + this. name + '. add (this)"> add </button> ',
Edit = '<button onclick = "' + this. name + '. editItem (this)"> modify </button> ';
JE. msg (key + val + add + edit, 'info ');
}
/* Listen to code change events */
JE. editUI. oninput = JE. editUI. onpropertychange = function (){
If (JE. formating) return;/* format the tree without refreshing */
If (/^ \ s * $/. test (this. value) return JE. msg ('enter the code in JSON format! ');;
ClearTimeout (JE. update );
Try {JE. data = eval ('+ this. value + ')');
} Catch (e ){
JE. editUI. style. color = 'red ';
Return JE. msg ("Source code error:" + e. description + '. if the message is being edited, ignore this message! ', 'Err ');
};
JE. editUI. style. color = '#000 ';
If (auto. checked | JE. firstUp) {/* if synchronization */
JE. msg ('syntax is correct. Re-construct the tree. Please wait... ', 'busy ');
JE. update = setTimeout (function (){
JE. toTree ();
},450 );
} Else {
JE. msg ('the syntax is correct. Please click Refresh, or enable view synchronization, or continue editing! ')
}
Return true;
};
If (window. ActiveXObject)
Document.exe cCommand ("BackgroundImageCache", false, true );
/* Intercept the Tab and format it automatically */
JE. editUI. onkeydown = function (){
If (event. keyCode = 9) {$ ('format _ indent '). onclick (); event. returnValue = false ;};
JE. code = this. value;
}
/* Format */
Var format = function (compress ){
Var code = JE. format (JE. editUI. value, compress );
JE. formating = true;
If (code) JE. editUI. value = code;
JE. editUI. focus ();
SetTimeout (function () {JE. formating = false ;},1000 );
Return code;
}
/* Toolbar button */
$ ('Format _ indent '). onclick = function () {if (format () JE. msg (' converts the indent style, '+ JE. countInfo )}
$ ('Format _ compress '). onclick = function () {if (format (true )! = Undefined) JE. msg ('complete compact style conversion, '+ JE. countInfo );}
UpdateUI. onclick = function (){
JE. firstUp = true;
JE. editUI. onpropertychange ()? JE. msg ('view refreshed successfully! '): JE. msg ('data error. Refresh failed! ', 'Err ')
JE. firstUp = false;
};
$ ('Clear _ txt '). onclick = function () {JE. editUI. value = JE. treeUI. innerHTML = ''; JE. editUI. focus ();}
Auto. onclick = function () {JE. msg ('automatic view synchronization function' + (this. checked? 'Enabled': 'Disabled! '));};
/* Save */
If (/* @ cc_on! @ */True) {$ ('Save _ as '). style. display = 'none '};
$ ('Save _ as'). onclick = function (){
Var d = document, w = d. createElement ('iframe ');
W. style. display = "none ";
D. body. appendChild (w );
SetTimeout (function (){
Var gw.{content}{doc ument;
G. charset = 'utf-8 ';
G. body. innerHTML = JE. editUI. value;
G.exe cCommand ("saveas", ''," json.txt ");
}, 1 );
}
};
/* Start from here */
Window. onload = function (){
JE. begin ();
}
// --> </Script>