JSON editor implementation code_json

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

JSON Editor Core Code

Copy Code The code is as follows: /* main Object */ JE={ data:{ },/* Associated data*/ code:false,/* Formatted code*/ oldCode:[],/* Historical code*/ editUI:null,/* Associated edit box */ msgUI:null,/* Information display window*/ treeUI:null,/* Tree window*/ name:'JE',/* Instance name*/ root:' JSON Worry-free ',/* Root node title*/ checkbox:0,/* Whether to add a checkbox*/ hot:null,/* Select node*/ indent:' ',/*indent character 't' or 4 ' '*/ firstUp:true,/*automatically refresh for the first time*/ onclick:Array,/*tree click notification */ countInfo:'',/*statistical information*/ formating:false,/* Formatting (reconstructing the tree is prohibited) */ ico:{/* tree icon*/ //Folder structure line r0:'img?uuid=20166b3094daba4bc6e18817b8301b093a', r0c:'img?uuid=208018827ed877e31810e838d33e4ac2b0', r1:'img? uuid=2094c793496278bde84be80bb6cb2117f5', r1c ; 5bc8544cecd8b7f82fcdb', //Prefix image nl:'img? uuid=20f508bdc9bb8d98f4529e0fa2475b91bb', vl:'img?uuid=20d5de63f4e6927bbb23c377bd1073d26f', //File structure line f1:'img?uuid=202ccc63 9afd44130a3946e9837672479c', 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:'im g?uuid=20327500502b71ed0278a0cc1bf8f8bb41', obj2:'img ?uuid=203346cafeedac1fb7628bc886b9b7fb47' }, toTree:function(){/* Convert JSON to tree HTML, while formatting code*/ var draw=[],This=this,ico=this. ico; JE.firstUp=false;/*Complete the first automatic construction*/ var notify=function(prefix/*Prefix HTML*/,lastParent/*Whether the parent is the tail node (make sure 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 the array node*/ draw.push(' ',This.draw(prefix,rl,ico.arr,name,''),' ');/* Draw Folder*/ for (var i=0;i notify(prefix This.img(lastParent?ico.nl:ico.vl),i==value.length- 1,i,value[i]); draw.push(' '); }else if(value&&typeof value=='object'){/* processing Object node*/ draw.push(' ',This.draw(prefix,rl,ico.obj,name,''),' ');/* Draw folder*/ var len=0,i=0; for(var key in value)len;/* Get the total number of object members*/ for(var key in value)notify(prefix This.img(lastParent?ico.nl:ico.vl), i==len,key,value[key],true); draw.push(' '); }else{/* Process leaf nodes (draw files) */ draw.push(' ',This.draw(prefix,lastParent?ico .f1:ico.f2,formObj?ico.obj2:ico.arr2,name,value),' '); }; };/* Not [ ] or {} does not draw */ if(typeof this.data=='object'){notify('',true,this.root,this.data);}; if(this.treeUI )this.treeUI.innerHTML=draw.join('');/* Display in tree window*/ this.msg('Tree view constructed successfully!'); }, draw:function (prevfix,line,ico,name,value){/* Child HTML constructor*/ var cmd=false,J=this.ico,imgName=false; switch (line) {//Pass 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 folding command*/ var type=typeof name= ='string'?'(Object member)':'(Array index)'; return prevfix this.img(line,cmd) (this.checkbox?' ':'') this.img(ico) ' 'key="' name '" val="' value '" >' name type (value== ''?'':' = ') value ' ' }, img:function(src,attr){/* img HTML construction*/ return ' '; }, click:function(item){/* Sub-item click unified callback */ if(this.hot)this.hot.className=''; this.hot=item; this.hot.className='hot';/* Switch selected item*/ this.onclick(item); }, format:function(txt,compress/*Whether it is compression mode*/){/* Format JSON source code (object converted to JSON text) */ if(/^s*$/.test(txt))return this.msg('The data is empty and cannot be formatted! '); try{var data=eval('(' txt ')' );} catch(e){ JE.editUI.style.color='red'; return this.msg('数据源语法错误,格式化失败! 错误信息: '+e.description,'err'); }; JE.editUI.style.color='#000'; var draw=[],last=false,This=this,line=compress?'':'\n',nodeCount=0,maxDepth=0; var notify=function(name,value,isLast,indent/*缩进*/,formObj){ nodeCount++;/*节点计数*/ for (var i=0,tab='';i tab=compress?'':tab;/*压缩模式忽略缩进*/ maxDepth=++indent;/*缩进递增并记录*/ if(value&&value.constructor==Array){/*处理数组*/ draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*缩进'[' 然后换行*/ for (var i=0;i notify(i,value[i],i==value.length-1,indent,false); draw.push(tab+']'+(isLast?line:(','+line)));/*缩进']'换行,若非尾元素则添加逗号*/ }else if(value&&typeof value=='object'){/*处理对象*/ draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*缩进'{' 然后换行*/ 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)));/*缩进'}'换行,若非尾元素则添加逗号*/ }else{ if(typeof value=='string')value='"'+value+'"'; draw.push(tab+(formObj?('"'+name+'":'):'')+value+(isLast?'':',')+line); }; }; var isLast=true,indent=0; notify('',data,isLast,indent,false); this.countInfo='共处理节点 '+nodeCount+' 个,最大树深为 '+maxDepth+' '; return draw.join(''); }, msg:function(text,type){/* 编辑状态或者错误通知 */ if(!this.msgUI)return alert(text); with(new Date)var now=([getHours(),getMinutes(),getSeconds()].join(':')).replace(/\b\d\b/g,'0$&'); this.msgUI.innerHTML=' ['+now+'] '+text.replace(/\n/g,' ')+' '; this.msgUI.className=type; }, show:function (ico,id){/* Show and hide tree nodes*/ 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 } }; JE.add=function(){ this.msg('Function is being added...*_^'); } JE.editItem=function(){ this.msg('Function is being added...*_^'); } JE.begin=function(){/* Set the UI control associated response */ var $=function (id){return document.getElementById(id)}; /* Associated UI */ JE.editUI=$("json_eidit"); JE. msgUI=$("json_editInfo"); JE.treeUI=$("tree"); var updateUI=$("update"); var auto=$("autoUpdate"); var fontSize=$("fontSize"); /* Click on the tree item*/ JE.onclick=function(item){ var key='Key name: ', val=' Key value: ' (item.getAttribute('val')==''?'Member list':' '), add=' New ', edit=' Modify '; JE.msg(key val add edit, 'info'); } /* Listen for code change events*/ JE.editUI.oninput=JE.editUI.onpropertychange=function (){ if(JE.formating)return; /* Formatting does not refresh the tree*/ if(/^s*$/.test(this.value))return JE.msg('Please 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("There is an error in the source code: " e.description ' , if you are editing, please ignore this message!','err'); }; JE.editUI. style.color='#000'; if(auto.checked||JE.firstUp){/*If synchronized*/ JE.msg('The syntax is correct, the tree is being reconstructed, please wait. ..','busy'); JE.update=setTimeout(function(){ JE.toTree(); },450); }else{ JE. msg('The syntax is correct, please click refresh, or turn on the view synchronization switch, or continue editing!') } return true; }; if(window.ActiveXObject) document .execCommand("BackgroundImageCache", false, true); /* Intercept Tab, automatic formatting*/ JE.editUI.onkeydown=function (){ if(event.keyCode==9) {$('format_indent').onclick();event.returnValue=false;}; JE.code=this.value; } /* Formatting*/ 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('Complete indent style conversion,' 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 is incorrect, 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 synchronization of view function' (this.checked?'On':'Off!'));}; /* Save as*/ 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 g =w.contentWindow.document; g.charset = 'utf-8'; g.body.innerHTML=JE.editUI.value; g.execCommand("saveas",'', " json.txt") ; },1); } }; /* Start here*/ window.onload=function (){ JE.begin (); } // -->

JSON editor implementation code_json

Related articles